div当用户单击链接时,我试图在同一页面上呈现。
div
我的HTML页面:
<div class="stores"> <h1>Stores</h1> <ul class="stores"> <li><a href="#" onClick={this.onClick} >Store A</a></li> <li>Store B</li> <li>Store C</li> </ul> </div>
我的components/store.js.jsx:
components/store.js.jsx
var Store = React.createClass({ getInitialState: function() { return { showStore: false }; }, onClick: function() { this.setState({ showStore: true }); }, render: function() { return( <div className="row account stores" style={{display: { this.state.showStore ? 'block' : 'none'} }}> <div>a lot more divs</div> </div> ); } });
但我得到一个:
语法错误:未知:意外的令牌
对于此行:
style={{display: { this.state.showStore ? 'block' : 'none'} }}
如何有条件地嵌套在样式中?
这是由于三元运算符的使用不正确。在此处查看文档:https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
您不应该{}像这样做那样将其包装起来。
{}
尝试以下方法:
style={{display: this.state.showStore ? 'block' : 'none' }}