React - 条件渲染
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 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; if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); }}function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> );}function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> );}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) { console.log(isLoggedIn) return ( <UserGreeting /> ); } return ( <GuestGreeting /> );}ReactDOM.render( <LoginControl />, document.getElementById('root')); |
在 js 中，true && expression 返回 expression，而 false && expression 返回 false。
阻止组件渲染
可以让 render 返回 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 | function WarningBanner(props) { 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(state => ({ showWarning: !state.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')); |
3 年前
Bihar Board Model Paper 2023 Class 4 Pdf Download for SCERT & NCERT Hindi Medium, English Medium & Urdu Medium Students at Bihar School Examination, Patna Board, e-Shikshana, Online and Bihar Board Online Portal at BSEB Model Paper Class 4 Bihar State Vidyalay Pariksha Samiti, Patna Board and others have designed and suggested the State Primary Education Class 4th Grade study & learning material as Bihar Board 4th Class Model Paper 2023 with Mock Test and Practice Questions along with suggested answers for Term1 & Term 2 Exams of the Course.
2 年前
In React, there are two ways to conditionally render a component: using an `if` statement, or using a `switch` statement. If you only need to conditionally render a single component, then using an `if` statement is the easiest way to do it. However, if you need to conditionally cbd effects render multiple components, then using a `switch` statement is a better option.
2 年前
This is a useful tip for those working with JavaScript. Knowing that true && expression returns the expression and false && expression returns false can be a great peter veres consulting companies montreal way to prevent a component from being rendered. By simply returning null when the expression is false, you can ensure that nothing is rendered. This is a great way to optimize code and make sure that only what is necessary is rendered.