×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 20 –有条件地渲染内容

    课程清单
    有条件地渲染内容
    有条件地渲染内容

    所以我们回来了 App.js file in there the render() method which we learned is used when creating a component by extending Component class, and there we already have outout the three Person component and that clearly is kind of a list because we also have person managed in our state = {...} object.
    将其作为列表输出是有意义的,但是在深入探讨之前,让我们先深入研究有条件地输出内容。首先,假设当我们单击按钮时,我们不想像上一课中那样切换名称。
    但是,假设我们要显示或隐藏我们拥有的人员组件 App.js

    For now we can simply wrap all the Person components in div so at the end we can show 要么 hide and automatically also show everything thats inside the div thats the idea behind wrapping all the Person component.
    第一步

    src / App.js
    
    ...
    return (
      <button style={style} onClick={() => {this.switchNameHandler('somename')}}>
    		Switch Name
    	</button>
    	<div>
    		<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    		<Person
    			click={this.switchNameHandler}
    			name={this.state.persons[1].name}
    			age={this.state.persons[1].age}
    			changed={this.nameChangedHandler}
    		/>
    		<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    	</div>
    );
    ...
    

    第二步
    we will change the method of onClick applied on a button and will name it to togglePersonsHandler() and no longer will pass an argument to that method.

    src / App.js
    
    ...
    return (
      {/*  <button style={style} onClick={() => {this.switchNameHandler('somename')}}>
    		Switch Name
    	</button> */}
      <button style={style} onClick={this.togglePersonsHandler}>
    		Switch Name
    	</button>
    );
    ...
    

    Now also we have to create a togglePersonsHandler method in App.js.
    So will will add a new method with a name togglePersonsHandler method above the render() method.

    src / App.js
    
    ...
    class App extends Component {
      togglePersonsHandler  = () => {
    
      }
      render(){
        ...
      }
    }
    ...
    

    Now in there to target some property which in the end the sites wherever we want to display the newly added div with the persons inside of it 要么 not.
    For that I will go into the state and add a new property names as showPersons the name is ofcourse is up to you, and will set that value to false initially.

    src / App.js
    
    class App extends Component {
    	state = {
    		persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
    		showPersons: false,
    	};
      ...
    }
    

    now if the state showPersons is false then i dont want to show the persons and how can we now render this dynamically.
    well we can go that div, In other frameworks like 角度的 要么 Vuejs you would now place a directive on that div for example angular we use the ng-if='expression'.
    但在反应上却有所不同。永远记住,我们使用的是javascript,只是看上去就像HTML一样,但最终是JSX,它只是语法糖rereact create元素。
    Now to show the content dynamically we can enclose the div in like { <div> ... </div> }
    between the single curly barces you can write javascript expressions thats not only true for 2+2 要么 for reaching out for the state, but also you can render content conditionally by adding a ternary expression.
    What you cant do in that is an if statement ( if(/* Condition */){ } ) and moving the div block inside if statement but that dosent work here. You can actually use simple statement no block statements as parts of that dynamic syntax.
    We can simply check like if this.state.showPersons keep in mind this is a boolean we assign false initially. So the statement will give us true 要么 false and now ternary expressin which is a 默认 javascript construct checks this condition by adding a ? and then we decide what to do if this is true and else part will be after `:`
    例如 :

    src / App.js
    
    class App extends Component {
      ...
      render() {
    		const style = { ... };
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<button style={style} onClick={this.togglePersonsHandler}>
    					Switch Name
    				</button>
    				{this.state.showPersons ? (
    					<div>
    						<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    						<Person
    							click={this.switchNameHandler}
    							name={this.state.persons[1].name}
    							age={this.state.persons[1].age}
    							changed={this.nameChangedHandler}
    						/>
    						<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    					</div>
    				) : null} {/* else render nothing */}
    			</div>
    		);
    	}
      ...
    }
    

    第一次使用时,这可能看起来超级混乱,我知道这一点。因此,我们最终在这里所做的只是利用了以下事实:我们在此处编写的所有内容都在javascript中,并且可以使用大括号将javascript表达式插入JSX中。
    Now with this lets complete our logic but making sure that the togglePersonsHandler correctly switches to state.

    src / App.js
    
    class App extends Component {
      ...
      togglePersonsHandler  = () => {
        const doesShow = this.state.showPersons;  // this either can be true 要么  false
        this.setState({showPersons: !doesShow});
      }
      render(){
        ...
      }
      ...
    }
    

    this.setState({showPersons: !doesShoe}) will togglw the showPersons value i.e. if it is true it will set false and if its true then it will set to false.
    after saving all the code and make sure npm start is running. you will find that no persons component is visible … once you click the button the persons component is been rendered on the page.
    这就是条件语句在反应中的工作方式。
    我们现在已经有了一个可以工作的条件检查,尽管可以写这样的条件检查虽然可以工作,但是也可能导致JSX代码混乱。如果您有很多甚至嵌套的检查,那么我将在下一课中为您提供替代方法。

    反应introduction
    反应Component
    有条件地渲染内容
  • 启用通知    不用了,谢谢