如何在反应js

Question

我们可以在React js style = {style} ??

中实现这一点

constructor(props) {
   super(props);
   this.state = {
     style_title: {"color": "blue"}
   };
 this.change = this.change.bind(this);
}

change(e) { 
 this.setState({ 
   [e.target.name]: e.target.value }) 
}

我的表格：

<input type="text" name="title" value={this.props.title} onChange={e =>this.changeEdit(e)} /> 
<input type="text" name="style_title" value={this.props.style_title} onChange={e =>this.changeEdit(e)} />  

标题文本打印预览模式为此我需要使用输入字段动态设置标题，例如：

{ "color": "blue", "font-size": "22px",} 

以上样式应在样式属性

中应用渲染<p style={style}>{this.props.title }</p>

预览部分：

render = () => (
 const style = this.props.style_title; 

 return (
     <p style={style}>{this.props.title }</p>
 );
)

Answer 1

在React中，您可以通过传递此处提到的对象来传递动态样式： React.js inline style best practices

或者你也可以传递内联：

<div style={{ height: '10%' }}>
  Hello World!
</div>

但需要注意的是，css属性位于camelCase，例如borderBottom: '10px'