如何使用React.js制作样式

Question

我正在尝试使用React.js的内联样式，但我一直遇到错误：

在我的渲染功能中，我有：

import 'dart:html';

var x = 1
var y = 'cat'
var z = {color: 'blue'}

window.console.log([x, y, z]);

基本上我想在点击时切换这种风格。但是，当我运行它时，我从React.js得到一个错误。 React.js中内联样式的正确语法是什么？谢谢！

Answer 1

在这一行：

var style = this.state.submitted ? {{"backgroundColor": "#1abc9c", "opacity": "0.6"}} : {{}};

你只是在JavaScript中，而不是在JSX标签内。因此，您只想使用单{}，而不是双{{}}：

var style = this.state.submitted ? {"backgroundColor": "#1abc9c", "opacity": "0.6"} : {};

特别是，当您执行以下操作时：

<div style={{"backgroundColor": "white"}}>

有一组{}表示style道具的值应该被解释为JavaScript，而另一组{}表示你正在构建一个对象那个价值。