React：Rendering Content conditionally

条件button

import React, { Component } from 'react'; import './App.css'; import Person from './Person/person'; import { render } from '@testing-library/react'; class App extends Component{ state={ persons:[ {name:'Max' , age:28}, {name:'manu' , age:24}, {name:'Snie' , age:26} ], isshow:false }; clicktoshow =(event)=>{ const tmp = this.state.isshow; this.setState({isshow:!tmp}); } switchNameHandler = (name)=>{ //console.log('Was Click!'); //Do not do this //this.state.persons[0].name = 'Maximilian'; this.setState({persons:[ {name:name, age:281}, {name:'manu1' , age:241}, {name:'Snie1' , age:261} ] }) }; nameChangedHandler = (event)=>{ this.setState({persons:[ {name:'max', age:281}, {name:event.target.value , age:241}, {name:'Snie1' , age:261} ] }) } render(){ const style = { backgroundColor:'white', font:'inherit', border:'1px solid blue', padding:'8px', cursor:'pointer' }; //hovering style难改 return ( <div className="App"> <h1>Hi i am a React App!</h1> <p>It is working!</p> <button style={style} onClick={this.clicktoshow}>Switch Name</button>{ this.state.isshow? <div> <Person name={this.state.persons[0].name} age={this.state.persons[0].age} click={this.switchNameHandler.bind(this,'BOB')} /> <Person name={this.state.persons[1].name} age={this.state.persons[1].age} click={()=>this.switchNameHandler('hello')} changed={this.nameChangedHandler} >My Hobbies: Racing</Person> <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/> </div>:null} </div> );}; } export default App;

More elegent way

import React, { Component } from 'react'; import './App.css'; import Person from './Person/person'; import { render } from '@testing-library/react'; class App extends Component{ state={ persons:[ {name:'Max' , age:28}, {name:'manu' , age:24}, {name:'Snie' , age:26} ], isshow:false }; clicktoshow =(event)=>{ const tmp = this.state.isshow; this.setState({isshow:!tmp}); } switchNameHandler = (name)=>{ //console.log('Was Click!'); //Do not do this //this.state.persons[0].name = 'Maximilian'; this.setState({persons:[ {name:name, age:281}, {name:'manu1' , age:241}, {name:'Snie1' , age:261} ] }) }; nameChangedHandler = (event)=>{ this.setState({persons:[ {name:'max', age:281}, {name:event.target.value , age:241}, {name:'Snie1' , age:261} ] }) } render(){ const style = { backgroundColor:'white', font:'inherit', border:'1px solid blue', padding:'8px', cursor:'pointer' }; //hovering style难改 let person=null; if(this.state.isshow){ person=( <div> <Person name={this.state.persons[0].name} age={this.state.persons[0].age} click={this.switchNameHandler.bind(this,'BOB')} /> <Person name={this.state.persons[1].name} age={this.state.persons[1].age} click={()=>this.switchNameHandler('hello')} changed={this.nameChangedHandler} >My Hobbies: Racing</Person> <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/> </div> ); }else{ person=null; } return ( <div className="App"> <h1>Hi i am a React App!</h1> <p>It is working!</p> <button style={style} onClick={this.clicktoshow}>Switch Name</button> {person} </div> );}; } export default App;

使用map动态创建Person

let person=null; if(this.state.isshow){ person=( <div> { this.state.persons.map(person=>{ return <Person name={person.name} age={person.age} click={this.switchNameHandler.bind(this,'top')} /> }) } </div> ); }else{ person=null; }