1.If/Else
class App extends React.Component {
state = {
text: '',
inputText: '',
mode: 'view',
}
handleChange = (e) => {
this.setState({ inputText: e.target.value });
}
handleSave = () => {
this.setState({text: this.state.inputText, mode: 'view'});
}
handleEdit = () => {
this.setState({mode: 'edit'});
}
renderInputField() {
if (this.state.mode === 'view') {
return <div />;
} else {
return (
<p>
<input
onChange={this.handleChange}
value={this.state.inputText}
/>
</p>
);
}
}
renderButton() {
if (this.state.mode === 'view') {
return (
<button onClick={this.handleEdit}>
Edit
</button>
);
} else {
return (
<button onClick={this.handleSave}>
Save
</button>
);
}
}
render() {
return (
<div>
<p>Text: {this.state.text}</p>
{this.renderInputField()}
{this.renderButton()}
</div>
);
}
}
2.三元运算符
{i>0?<div className="box">用三目运算符条件渲染</div>:''}
3.短路运算符
三元运算符在某些场景下可以更加简化。例如,当你要么渲染一个组件,要么不做渲染,你可以使用&&
运算符。
不像&
运算符,如果&&
执行左侧的表达式就可以确认结果的话,右侧表达式将不会执行。
举个例子,如果左侧表达式结果为false(false && ...
),那么下一个表达式就不需要执行,因为结果永远都是false。
在React中,你可以这样运用:
return (
<div>
{ showHeader && <Header /> }
</div>
);
如果showHeader
结果为true
,那么<Header />
组件就会被返回;如果showHeader
结果为false,那么<Header />
组件会被忽略,返回的会是一个空div
。