React官网学习实践 - 条件渲染 Myth丶恋晨 2021-06-24 16:11 421阅读 0赞 在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 [`if`][if] 或[条件运算符][Link 1]来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。 实例: 首先创建三个组件: function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } 定义一个变量,是否登录, isLoggedIn: constructor(props) { super(props); this.state = { isLoggedIn: true }; 再定义一个button,并设置一个事件函数,点击button修改登录状态: handleClick() { this.setState(prevState => ({ isLoggedIn: !prevState.isLoggedIn })); } render() { return ( <div> <Greeting isLoggedIn={this.state.isLoggedIn} /> <button onClick={this.handleClick}> {this.state.isLoggedIn ? '登出' : '登录'} </button> </div> ); } 显示: ![2789632-9847c61c1268de48.gif][] Code: import React, { Component } from 'react'; import './App.css'; function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } class App extends Component { constructor(props) { super(props); this.state = { isLoggedIn: true }; this.handleClick = this.handleClick.bind(this); } componentWillMount () { console.log('this is in componentWillMount method.'); } componentDidMount () { console.log('this is in componentDidMount method.'); } componentWillReceiveProps (nextProps) { console.log('this is in componentWillReceiveProps method.'); } // shouldComponentUpdate (nextProps,nextState) { // console.log('this is in shouldComponentUpdate method.'); // } componentWillUpdate (nextProps,nextState) { console.log('this is in componentWillUpdate method.'); } componentDidUpdate (prevProps,prevState) { console.log('this is in componentDidUpdate method.'); } handleClick() { this.setState(prevState => ({ isLoggedIn: !prevState.isLoggedIn })); } render() { return ( <div> <Greeting isLoggedIn={this.state.isLoggedIn} /> <button onClick={this.handleClick}> {this.state.isLoggedIn ? '登出' : '登录'} </button> </div> ); } componentWillUnmount () { console.log('this is in componentWillUnmount method.'); } } export default App; [if]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else [Link 1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator [2789632-9847c61c1268de48.gif]: /images/20210615/59a11e215be74a5c8775266cf1efffaa.png
还没有评论,来说两句吧...