我如何选择在JSX中包含一个元素?下面是一个使用横幅的例子，如果它已经被传入，那么它应该在组件中。我想避免的是在if语句中重复HTML标记。
render: function () {
var banner;
if (this.state.banner) {
banner = <div id="banner">{this.state.banner}</div>;
} else {
banner = ?????
}
return (
<div id="page">
{banner}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
当前回答
&& +代码风格+小组件
对我来说，这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值，如false、0或""。
render: function() {
var person= ...;
var counter= ...;
return (
<div className="component">
{person && (
<Person person={person}/>
)}
{(typeof counter !== 'undefined') && (
<Counter value={counter}/>
)}
</div>
);
}
做记号
ES7 stage-0 do符号语法也非常好，当我的IDE正确支持它时，我肯定会使用它:
const Users = ({users}) => (
<div>
{users.map(user =>
<User key={user.id} user={user}/>
)}
</div>
)
const UserList = ({users}) => do {
if (!users) <div>Loading</div>
else if (!users.length) <div>Empty</div>
else <Users users={users}/>
}
更多细节在这里:创建一个“If”组件…好主意?
其他回答
只是为了扩展@Jack Allan的回答，引用文档。
React基本(快速入门)文档建议在这种情况下为null。 然而，布尔值、Null和Undefined也会被忽略，详见高级指南。
下面是我使用ES6的方法。
import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';
class ToggleBox extends Component {
constructor(props) {
super(props);
this.state = {
// toggle box is closed initially
opened: false,
};
// http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
this.toggleBox = this.toggleBox.bind(this);
}
toggleBox() {
// check if box is currently opened
const { opened } = this.state;
this.setState({
// toggle value of `opened`
opened: !opened,
});
}
render() {
const { title, children } = this.props;
const { opened } = this.state;
return (
<div className="box">
<div className="boxTitle" onClick={this.toggleBox}>
{title}
</div>
{opened && children && (
<div class="boxContent">
{children}
</div>
)}
</div>
);
}
}
ReactDOM.render((
<ToggleBox title="Click me">
<div>Some content</div>
</ToggleBox>
), document.getElementById('app'));
演示:http://jsfiddle.net/kb3gN/16688/
我使用的代码如下:
{opened && <SomeElement />}
仅当opened为true时才会呈现SomeElement。它的工作原理在于JavaScript解析逻辑条件的方式:
true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise
由于React会忽略false，我发现它是有条件渲染某些元素的好方法。
我想这一点没有被提及。这就像你自己的答案，但我认为它更简单。您总是可以从表达式中返回字符串，并且可以在表达式中嵌套jsx，因此这允许易于阅读的内联表达式。
render: function () {
return (
<div id="page">
{this.state.banner ? <div id="banner">{this.state.banner}</div> : ''}
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script> <script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script> <script type="text/jsx;harmony=true">void function() { "use strict"; var Hello = React.createClass({ render: function() { return ( <div id="page"> {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''} <div id="other-content"> blah blah blah... </div> </div> ); } }); var element = <div><Hello /><Hello banner="banner"/></div>; React.render(element, document.body); }()</script>
当必须只渲染某些东西，如果传递的条件是完全满足的，你可以使用语法:
{ condition && what_to_render }
这种方式的代码看起来像这样:
render() {
const { banner } = this.state;
return (
<div id="page">
{ banner && <div id="banner">{banner}</div> }
<div id="other-content">
blah blah blah...
</div>
</div>
);
}
当然，还有其他有效的方法来做到这一点，这完全取决于偏好和场合。如果你感兴趣，你可以在本文中学习更多如何在React中进行条件渲染的方法!
还有一个非常简洁的单行版本……{this.props.product.title || "No Title"}
Ie:
render: function() {
return (
<div className="title">
{ this.props.product.title || "No Title" }
</div>
);
}
