如何在反應中編寫內聯樣式

Question

這條線有什麼問題？ var firstColStyle = {text-align：right};這個作品： var firstColStyle = {width：70};

似乎是一種奇怪的風格語法？ 有關此問題的文檔非常差。 如何使元素具有反應性，所以我不能使用20％而不是300px。

與問候

格哈德

Answer 1

更改firstColStyle到：

var firstColStyle = { textAlign: 'right' } 

如果你必須設置PX，您可以：

var someSize = { width : '2px' } 

如果百分比：

var otherWidth = { width : ' 10%' } 

Answer 2

text-align不是一個有效的Javascript標識符，因此您不能將其用作代碼中字面表達式的一部分。下面的所有例子都出於同樣的原因失敗。

var text-align = 'right'; 
style.text-align = 'right'; 
var style = { text-align: 'right' }; 

雖然用字符串創建屬性是有效的。

style['text-align'] = 'right'; 
// or 
var style = { 'text-align': 'right' }; 
// or 
const prop = 'text-align'; 
const style = { [prop]: 'right' }; 

但是，這違反了常規的Javascript變量命名約定，並迫使您使用訪問符表示法編寫代碼。

您會發現，用於樣式元素的本機API使用camelcase表示法來表示樣式，而且React遵循現有約定。

// existing style api 
document.body.style.textAlign = 'red'; 

的唯一方法陣營支持單位，是把參數指定爲字符串，所以使用70%你需要寫'70%'。

就我個人而言，我覺得這有點亂。最近我一直在使用花園（一種用Clojure編寫CSS的方法），並提供了一些指定單元的函數。如果我打算在React中使用內聯樣式，我很想用Javascript重新創建它們。

事情是這樣的：

import { px, em, percent } from 'units'; 

var width = 30; 

const style = { 
    height: px(width * 2), 
    width: px(width), 
    margin: percent(5) 
}; 

這使你保持你的單位作爲數字變量，這意味着你可以做他們的數學，而無需編寫任何討厭的字符串連接的代碼。