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

  • 22 – 输出清单 In 反应

    课程清单
    [在React中输出列表, 输出清单 In 反应]

    介绍

    在上一课中,我们学习了如何有条件地输出内容,并且我们只是利用了这一事实。
    现在,我想提供到目前为止的人员清单,我们不会动态地这样做。因为我们的状态中有几个人,所以这应该是我们唯一的真理来源。这应该是我们的数据源。在更大的应用程序或实际应用程序中,可能会从数据中填充数据,或者从服务器中获取数据。

    因此,当我们得到一个人数组时,但是在JSX中,我们简单地对三个人进行硬编码,然后将数据手动分配给另一个人和我们的数组,如果我们添加一个新人或删除一个人,那么这当然是不灵活的基本上会崩溃的一个,我们甚至无法像更新单击或点击操作那样在更新特定对象时讲话 changeHandler。这一切都无法正常工作。
    因此,让我们学习如何基本上可以将数据列表,数组排空,以及如何与之交互并正确更改状态中的数组。


    输出清单

    So let’s start without putting this as an actual list if we have a look we get three elements in the persons array on our state.

    在其他框架中:
    在其他框架中 Vue.js you would have a directive v-for or an in 角度的 we use ng-for and in react we dont have this because everything is javascript!

    就像有条件的内容一样,我们在这里使用普通的javascript。我们还使用默认工具处理列表,而javascript则为我们提供了使用列表的工具。

    使用 Array.map()

    in the map() dunction it simply maps every element in a given array such as our persons array into something else.
    它通过对给定数组中的每个元素执行一个方法来实现。

    src / App.js
    
    ...
    let persons = null;
    if (this.state.showPersons) {
    	persons = (
    		<div>
    			{this.state.persons.map(person => {
    				return (' -- JSX CODE -- ');
    			})}
    			{/* <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>
    	);
    }
    ...
    

    .map(person => {}) will take the element of array as the input. So as a single person the name of the argument is totally upto you.
    We are 使用 arrow function inside the .map() the method is an ES6 arrow function which I pass to the map method might look strange but is vanilla ES6 but javascript, not JSX nothing like that. that’s why its inside the single curly braces { .map( ... => {...} ) }.
    因此,在person数组中的每个元素上都会执行我作为匿名函数传递给map方法的函数,而javascript会自动为我们提供每个元素,作为我们在每个元素上执行的函数的输入。
    因此,在匿名函数内部,您必须返回某些内容,应该返回要将项目映射到的内容。
    As we have an Array<object> in state.persons and we want to connvert that each object into something else. The map method will return an new array so will pass our JSX code to return an array of Person component to render on page.

    src / App.js
    
    ...
    if (this.state.showPersons) {
    	persons = (
    		<div>
    			{this.state.persons.map(person => {
    				return <Person name={person.name} age={person.age} />;
    			})}
    			{/*
    				<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    				...
    			*/}
    		</div>
    	);
    }
    ...
    

    运行该应用程序后,单击按钮后,您将看到一个新错误

    我一定会再说一遍,这是非常重要的,我们已经可以看到它正在运行,它通过将数组映射到其他东西来呈现元素列表。


    现在,让我们更深入地研究此(列表项),并了解该键的内容,以及我们如何对数组的更改做出反应以及如何通过使用事件侦听器对其进行更改。

    反应introduction
    反应Component
    在React中输出列表
  • 启用通知    不用了,谢谢