React 将内联样式属性视为字符串，即使我正在传递一个对象

Question

当我使用下面的 JSX 以编程方式设置内联样式时，页面无法加载。我已将代码简化为一个简单的示例来说明问题。

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.

这是我第一天学习 React 和 JSX，所以我肯定遗漏了一些明显的东西。但似乎我做对了：我将一个对象（不是字符串）放在花括号内。为什么 React 将其解释为字符串？

Answer 1

问题出在属性值两边的引号上。在 JSX 中，如果用 JavaScript 代码替换静态属性值，代码必须在大括号内，括号内的代码不能被引用。这与其他模板语言（例如 ASP.NET）不同，在其他模板语言中，attributes-with-code 周围的引号是允许的，甚至是必需的。

当我删除属性值周围的引号时，它工作正常。

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

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

现在我明白了，这似乎很明显，但在我注意到引号之前，我浪费了 half-hour 挖掘异常调用堆栈和谷歌搜索 "how to set inline styles with react" 示例代码。

我在这里发布此问答，希望未来的 JSX 新手能够 Google 了解此错误消息并找出他们做错了什么。 ;-)

React 将内联样式属性视为字符串，即使我正在传递一个对象

React sees inline style attribute as a string even though I'm passing an object

inline-styles

reactjs

react-jsx