Я бы создал локальную функцию, которая вычисляет общую стоимость из состояния вместо добавления уровня сложности в состояние. Я создал пример ниже. Вы можете использовать возвращаемое значение, чтобы сделать что угодно.
class App extends React.Component {
state = {
tomsWallet: 50,
hannahsPurse: 49,
}
getTotalBalance = () => {
return (this.state.tomsWallet + this.state.hannahsPurse).toFixed(2);
}
render() {
return (
<div>Total Balance: £{this.getTotalBalance()}</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Во-первых, для помощи с возможным (и очень распространенный) беспорядку с термином DPI (точки на дюйм):
DPI не является точно частью "настроек дисплея". Это (mis), используемый в двух различных контекстах:
При печати изображения, существует много вещей, которые влияют на заключительные размеры изображения на бумаге:
нижняя строка, изображение, которое Вы печатаете, будет эффективно передискретизироваться (уменьшенный или увеличенный) для соответствия заключительному DPI, это используется в процессе печати. Любая из сторон involed может вызывать это (программа, драйвер печати, принтер).
Now, возвращаясь к Вашему вопросу. Нет, Вы не можете определить DPI экрана, потому что это не находится в домене программного обеспечения. Это - аппаратный термин домена, описывая, как большой монитор пользователь мог позволить себе купить. Обновление: я первоначально записал, что это огрызается в 2009 с моим пониманием современных технологий. Как @thure указанный, Вы можете теперь (с 2012?) используют функция window.matchMedia для определения DPI экрана.
, При попытке достигнуть точности в печати HTML-разметки, поскольку другие предложили, Ваш CSS должен использовать размеры печати как они, pt или ПК вместо пкс. Однако конечный результат мог бы все еще зависеть от использования браузера. Если преобразование Вашего HTML к PDF (или генерация PDF с нуля) являются опцией для Вас, печатение PDF дало бы Вам самый истинный WYSIWYG и на экране и на бумаге.
Нет способа, которым я знаю о, однако, они могут быть альтернативным решением:
Указывают Ваши измерения в 'pt' и 'них', которые являются экранными метриками родственника.
http://www.w3schools.com/cssref/css_units.asp
https://css-tricks.com/the-lengths-of-css /
- их:
1em
равно размеру текущего шрифта.2em
средства 2 раза размер текущего шрифта. Например, если элемент отображен со шрифтом12 pt
, то'2em'
24 pt
. Эти'em'
очень полезная единица в CSS, так как он может адаптироваться автоматически к шрифту, который читатель использует- ПБ:
точка (1 pt
совпадает с1/72 inch
)- пк:
цицеро (1 pc
совпадает с12 points
)
Похоже, вы можете использовать «экранный» DOM-объект в IE, у него есть свойства для deviceXDPI, deviceYDPI, logicXDPI, logicYDPI.
https://www.w3schools.com/jsref /obj_screen.asp
Вот решение от http://www.webdeveloper.com/forum/showthread.php?t=175278 (Я не пробовал, похоже, полный взлом :) Просто создайте что-то шириной 1 дюйм и измерьте его в пикселях!
HTML:
<div id="dpi"></div>
Стиль:
#dpi {
height: 1in;
left: -100%;
position: absolute;
top: -100%;
width: 1in;
}
Javascript:
function getDPI() {
return document.getElementById("dpi").offsetHeight;
}