Reactjs React将内联样式属性视为字符串，即使I'；我经过一个物体

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

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

const AboutPage=（）=>{
让buttonStyle={color:'red'}；
返回(
);
}

我在浏览器控制台中遇到此错误：

样式属性需要从样式属性到值的映射，

不是字符串。例如，当

使用JSX。

---

这是我第一天学习React和JSX，所以我肯定错过了一些明显的东西。但看起来我做的是对的：我在花括号里放了一个对象（不是一根线）。为什么React会将其解释为字符串？

问题在于属性值周围的引号。在JSX中，如果用JavaScript代码替换静态属性值，则代码必须在花括号内，括号内的代码不能被引用。这与其他模板语言（例如ASP.NET）不同，在这些语言中，允许或甚至需要在属性周围加引号

当我删除属性值周围的引号时，它工作得很好

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

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

现在我似乎明白了，但在我注意到引用之前，我浪费了半个小时挖掘异常调用堆栈，在谷歌上搜索“如何使用react设置内联样式”示例代码

---

我在这里发布这个问答，希望未来的JSX新手能够通过谷歌搜索这个错误消息，找出他们做错了什么。；-）

这实际上在这里有明确的解释：，在官方文件中。“谷歌反射”有时太强了以至于无法抗拒：）很高兴你发现了这一点。您还可以在线声明样式，如下所示：

style={{color:“red”}

。注意双大括号。还要注意的是，通常用破折号书写的css属性（例如字体大小、文本对齐等）是用驼峰大小写的（例如fontSize、textAlign等）。@62mkv-yep，这是内联样式的文档（我在发布之前阅读过），但是这些文档对我没有帮助，因为我的错误更为根本：我没有意识到JSX解析器不允许在应该解释为JavaScript的属性值周围加引号。我刚刚为JSX文档（）的相关部分创建了一个Pull请求，以便更清楚地了解删除引号的必要性。接下来：我的Pull请求被接受，文档现在被更新，以澄清引号和大括号是互斥的。请参见属性部分末尾的新段落：