ReactJS 中的内联样式
Posted
技术标签:
【中文标题】ReactJS 中的内联样式【英文标题】:Inline-styles in ReactJS 【发布时间】:2018-01-02 04:26:21 【问题描述】:我是 ReactJS 的新手。单击按钮时,我试图同时更改按钮的文本和颜色。此代码有效:
class ToggleHelp extends React.Component
constructor(props)
super(props);
this.state = isHelpOn: true;
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
handleClick()
this.setState(prevState => (
isHelpOn: !prevState.isHelpOn
));
render()
return (
<button onClick=this.handleClick>
this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'
</button>
);
ReactDOM.render(
<ToggleHelp />,
document.getElementById('root')
);
但是当我尝试应用如下内联样式时,代码停止工作。
<button style=background:yellow onClick=this.handleClick>
this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'
</button>
我已经尝试了几次,以各种方式进行。我现在希望它是一种内联样式。是否可以直接从 React 应用内联样式?如果是,则想法是评估状态并通过条件语句在另一种颜色上设置一种颜色。
【问题讨论】:
这样写:style=backgroundColor:'yellow'
【参考方案1】:
将你的内联样式声明为一个对象:
<button style= background: 'yellow' onClick=this.handleClick>
this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'
</button>
【讨论】:
【参考方案2】:您缺少一组括号和一些引号:
<button style=background: 'yellow' onClick=this.handleClick>
this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'
</button>
React 的 style 属性需要一个对象 (background: 'yellow'
),因为它不是一个简单的字符串,所以你需要在属性 ...
周围额外加上一组括号。
【讨论】:
【参考方案3】:首先,样式必须作为对象传递。
其次 - css 值必须是字符串。
style= background: 'yellow'
【讨论】:
【参考方案4】:你需要把它包裹在另一个:
<button style=background:'yellow' onClick=this.handleClick>
this.state.isHelpOn ? 'HELP ON' : 'HELP OFF'
</button>
s 的外部集合只是告诉 JSX 编译器内部是 javascript 代码。
s 的内部集合创建了一个 JavaScript 对象字面量。
【讨论】:
以上是关于ReactJS 中的内联样式的主要内容,如果未能解决你的问题,请参考以下文章