一点点记录，建议需要学习React的移步官方文档去学习。
在React中，你可以创建一个清晰(distinct)的组件来简要描述你现在需要的东西。然后，你只需要使用你应用中的state来渲染它们。
React中的条件型渲染跟JavaScript中的条件运算符运行方式差不多。好像就是使用JavaScript中的if或者三元运算符创建元素来显示现在的状态，然后让React更新UI来匹配这些修改。
下面这个例子就是根据不同的isLoggedIn进行不同的欢迎。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function (props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
|
元素变量(element variables)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
|
如果你觉得上述的代码非常的冗长，React有更短的哦
1.inline if with logical && Operator（这个地方我不会翻译）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
//就在下面这里
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
& 大专栏 React官方文档学习记录（四）- 条件渲染lt;Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
|
这个的意思就是使用了 true && 表达式，如果是false &&的话就相当于false。
因此当表达式是true的时候，这个紧跟&&的元素就会在输出结果中显示，否则React就忽视并跳过它。
2.这种方式就是使用JavaScript中的三元运算符condition? true : false，下面的例子中我们使用这个来进行条件性地渲染一小块的文本。
1 2 3 4 5 6 7 8 |
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
|
当然你也可以这么复杂地写:
1 2 3 4 5 6 7 8 9 10 11 12 |
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
|
这一切都是取决于你和你的码友觉得哪种方式更加易读吧，但是当判断表达式非常多的时候，请注意学会拆分组件！！！
不让组件渲染
当你在某些情况下不想让组件渲染的时候，请使用return null这样就可以隐藏它啦
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
function WarningBanner(props) {
// WarningBanner这个组件渲染与否取决于props.warn的值
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
|
当从组件的render()中返回null的时候，是不会影响组件的生命循环方法的。这就意味着componentDidMount和componentWillUnmount方法仍然是会被调用的哦。
原文地址：https://www.cnblogs.com/dajunjun/p/11699445.html
时间： 2024-10-19 03:12:29