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

  • 21 –使用JavaScript方式处理动态内容

    课程清单
    处理动态内容
    处理动态内容

    In the last lesson we learn how to render a content dynamically or conditionally and then we simply take an advantage of the fact that everything in render() is javascript.
    I also mention in the last lesson that using the ternary expression as we did in div content is not necessarily optimal. If our application grows and as we possibly nest conditions it can be hard to keep track of which expression is responsible for what and to spot into our JSX code.


    因此,对于这个问题,我想向您展示一个更清洁的解决方案。
    So let me remove curly braces contains ternary expression { this.state.showPersons ? ( ... ) : null } so that for the moment all the persons are rendered all the time again. Make sure you only remove expression part not the div part.

    记住:
    现在,有一件重要的事情要牢记在心,当react决定需要更新屏幕时,它会执行屏幕上的渲染操作,而不仅仅是为其中的所有内容返回表达式 render() { return( ... ) }
    So every thing inside the render meyhod gets executed whenever react re-render the Components inside it, therefore we could advantage of it.

    处理动态内容:JS方法

    Taking advantage of that , we can add some code in render method before we return() something.
    so very first I will declare a variable person set as null (let person = null) Now this should be the 默认. After that I will add an if(){ ... } statement, I can write the if statement there because I am not inside the JSX code.

    src / App.js
    
    ...
      render(){
        ....
        const persons = null;
        if(this.state.showPersons){  // Boolean value
          persons = (
            {/* JSX code */}
          );
        }
        return(
        {/* JSX code */}
        )
      }
    

    So we will create a check statement and if the this.state.showPersons is true we will set our newly created variable perons to some JSX code.
    After that we will grab the entire div section which we want to show on condition i.e Person component and put inside if condition as given below.

    src / App.js
    
    ...
      render() {
    		const style = { ... };
    		let persons = null;
    		if (this.state.showPersons) {
    			persons = (
    				<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>
    			);
    		}
    		return (
    			<div className="App">
    				<h1> Heading</h1>
    				<button style={style} onClick={this.togglePersonsHandler}>
    					Switch Name
    				</button>
    				{persons}
    			</div>
    		);
    	}
    ...
    

    So if the condition get value true it will set the JSX code to that variable.
    At the end within the single curly braces I can output persons referring to the persons variable which is null by 默认 or if showPersons is true and since render is gets called whenever react check if it needs to re-render this page or that particular component I should say since this happens every time re-render occurs we make sure that we always take the latest state we have into account and even render nothing or the persons because keep in mind one of the two things triggering an update is a state change.
    现在,使用此命令保存文件并在浏览器中运行该应用程序。行为将相同,但是代码更加优雅。

    这是输出条件内容的首选方式,也是我推荐的方式。

    反应introduction
    反应Component
    处理动态内容
  • 启用通知    不用了,谢谢