即使我傳遞一個對象，React仍將內聯樣式屬性視爲字符串

當我使用下面的JSX以編程方式設置內聯樣式時，將無法加載該頁面。我將代碼簡化爲一個簡單的例子來說明問題。即使我傳遞一個對象，React仍將內聯樣式屬性視爲字符串

const AboutPage =() => { 
    let buttonStyle = { color: 'red' }; 
    return (
     <div> 
      <input type="button" style="{buttonStyle}" value="Click Me" /> 
     </div> 
    ); 
}

我得到這個錯誤在瀏覽器控制檯：

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

這是我第一天的學習反應，JSX所以我一定是失去了一些東西明顯。但似乎我做的是正確的事情：我在花括號內放置了一個對象（不是字符串）。爲什麼React將它解釋爲一個字符串？

來源

2017-01-16 Justin Grant

問題是圍繞屬性值的引號。在JSX中，如果用JavaScript代碼替換靜態屬性值，則代碼必須位於大括號內，而括號內的代碼不能用引號引起來。這與其他模板語言（例如ASP.NET）如何允許或甚至需要帶有代碼屬性的引號不同。

當我刪除屬性值周圍的引號時，它工作正常。

<!-- bad --> 
<input type="button" style="{buttonStyle}" value="Click Me" /> 

<!-- good --> 
<input type="button" style={buttonStyle} value="Click Me" />

現在似乎很明顯，我想通了，但我浪費了半小時裏，異常調用堆棧挖掘和google搜索「如何設置內嵌樣式與反應」之前，我注意到了引號的示例代碼。

我在這裏發佈Q &這裏希望未來的JSX新手能夠向Google發送此錯誤消息並找出他們做錯了什麼。 ;-)

來源

2017-01-16 07:30:32

這實際上在這裏明確解釋：https://facebook.github.io/react/docs/dom-elements.html#style，在官方文檔中。「谷歌反射」太強大，不能抵擋有時:) – 62mkv

很高興你知道這一點。您也可以在線聲明樣式，如下所示：'style = {{color：「red」}}'。請注意雙花括號。還要注意，通常用破折號（例如font-size，text-align等）編寫的css屬性是用駱駝大小寫的（例如fontSize，textAlign等）寫的。 – Chris

@ 62mkv - 是的，這是內聯樣式的文檔（我在發佈之前閱讀它），但這些文檔沒有幫助我，因爲我的錯誤更基礎：我沒有意識到JSX解析器不允許引用屬性應該被解釋爲JavaScript的值。我剛剛爲JSX文檔的相關部分（https://facebook.github.io/react/docs/introducing-jsx.html#specifying-attributes-with-jsx）創建了合併請求，以便更清楚地瞭解帶引號。 –

即使我傳遞一個對象，React仍將內聯樣式屬性視爲字符串

回答

相關問題