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）的不同之处在于，其中允许甚至需要带有代码属性的引号。

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

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

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

现在我觉得很清楚，但是我浪费了半小时的时间来挖掘异常的callstack和google搜索＆＃34;如何设置内联样式with react＆＃34;在我注意到引号之前的示例代码。

我在这里发布了这个Q＆amp; A，希望未来的JSX新手能够通过Google获取此错误消息并弄清楚他们做错了什么。 ; - ）

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

1 个答案: