266 lines
7.4 KiB
Markdown
266 lines
7.4 KiB
Markdown
---
|
||
id: 5a24c314108439a4d403618a
|
||
title: 使用 Array.map() 动态渲染元素
|
||
challengeType: 6
|
||
forumTopicId: 301417
|
||
dashedName: use-array-map-to-dynamically-render-elements
|
||
---
|
||
|
||
# --description--
|
||
|
||
条件渲染很有用，但是可能需要组件来渲染未知数量的元素。 通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，因为这在很大程度上取决于用户与该程序的交互。 程序员需要提前编写代码来正确处理未知状态。 在 React 中使用 `Array.map()` 阐明了这个概念。
|
||
|
||
例如，创建一个简单的“To Do List”应用程序。 作为程序员，你无法知道用户可能在其列表中有多少项。 需要设置组件，以便在使用该程序的人决定今天今日待办事项之前动态渲染正确数量的列表元素。
|
||
|
||
# --instructions--
|
||
|
||
代码编辑器完成了 `MyToDoList` 组件的大部分设置。 如果完成了受控表单挑战，这些代码中的一些应该看起来很熟悉。 你会注意到一个 `textarea` 和一个 `button`，以及一些跟踪它们状态的方法，但是页面当前还没有任何东西被渲染。
|
||
|
||
在 `constructor` 中，创建一个 `this.state` 对象并定义两个 state：`userInput` 应该初始化为空字符串，`toDoList` 应该初始化为空数组。 接下来，删除 `items` 变量旁边 `render()` 方法中的注释。 取而代之的是，将存储在组件内部 state 中的 `toDoList` 数组一一遍历并相应的动态呈现 `li` 元素中。 尝试在 `textarea` 中输入 `eat, code, sleep, repeat`，然后点击按钮，看看会发生什么。
|
||
|
||
**注意：** 像这样的映射操作创建的所有兄弟子元素都需要提供唯一的 `key` 属性。 别担心，这是下一个挑战的主题。
|
||
|
||
# --hints--
|
||
|
||
MyToDoList 组件应该存在，并渲染到页面。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
return mockedComponent.find('MyToDoList').length === 1;
|
||
})()
|
||
);
|
||
```
|
||
|
||
`MyToDoList` 组件的第一个子元素应该是 `textarea` 元素。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
return (
|
||
mockedComponent.find('MyToDoList').children().childAt(0).type() ===
|
||
'textarea'
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`MyToDoList` 组件的第二个子元素应该是 `br` 元素。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
return (
|
||
mockedComponent.find('MyToDoList').children().childAt(1).type() === 'br'
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`MyToDoList` 组件的第三个子元素应该是 `button` 元素。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
return (
|
||
mockedComponent.find('MyToDoList').children().childAt(2).type() ===
|
||
'button'
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`MyToDoList` 的 state 应该使用被设置为空数组的 `toDoList` 进行初始化。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
const initialState = mockedComponent.state();
|
||
return (
|
||
Array.isArray(initialState.toDoList) === true &&
|
||
initialState.toDoList.length === 0
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
`MyToDoList` 的 state 应该使用被设置为空字符串的 `userInput` 进行初始化。
|
||
|
||
```js
|
||
assert(
|
||
(function () {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
const initialState = mockedComponent.state();
|
||
return (
|
||
typeof initialState.userInput === 'string' &&
|
||
initialState.userInput.length === 0
|
||
);
|
||
})()
|
||
);
|
||
```
|
||
|
||
单击 `Create List` 按钮时，`MyToDoList` 组件应该动态返回一个无序列表，该列表包含输入到 `textarea` 元素中的逗号分隔列表的每个项目的列表项目元素。
|
||
|
||
```js
|
||
(() => {
|
||
const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
|
||
const simulateChange = (el, value) =>
|
||
el.simulate('change', { target: { value } });
|
||
const state_1 = () => {
|
||
return mockedComponent.find('ul').find('li');
|
||
};
|
||
const setInput = () => {
|
||
return simulateChange(
|
||
mockedComponent.find('textarea'),
|
||
'testA, testB, testC'
|
||
);
|
||
};
|
||
const click = () => {
|
||
return mockedComponent.find('button').simulate('click');
|
||
};
|
||
const state_2 = () => {
|
||
const nodes = mockedComponent.find('ul').find('li');
|
||
return { nodes, text: nodes.reduce((t, n) => t + n.text().trim(), '') };
|
||
};
|
||
const setInput_2 = () => {
|
||
return simulateChange(
|
||
mockedComponent.find('textarea'),
|
||
't1, t2, t3, t4, t5, t6'
|
||
);
|
||
};
|
||
const click_1 = () => {
|
||
return mockedComponent.find('button').simulate('click');
|
||
};
|
||
const state_3 = () => {
|
||
const nodes = mockedComponent.find('ul').find('li');
|
||
return { nodes, text: nodes.reduce((t, n) => t + n.text().trim(), '') };
|
||
};
|
||
const awaited_state_1 = state_1();
|
||
const awaited_setInput = setInput();
|
||
const awaited_click = click();
|
||
const awaited_state_2 = state_2();
|
||
const awaited_setInput_2 = setInput_2();
|
||
const awaited_click_1 = click_1();
|
||
const awaited_state_3 = state_3();
|
||
assert(
|
||
awaited_state_1.length === 0 &&
|
||
awaited_state_2.nodes.length === 3 &&
|
||
awaited_state_3.nodes.length === 6 &&
|
||
awaited_state_2.text === 'testAtestBtestC' &&
|
||
awaited_state_3.text === 't1t2t3t4t5t6'
|
||
);
|
||
})();
|
||
```
|
||
|
||
# --seed--
|
||
|
||
## --after-user-code--
|
||
|
||
```jsx
|
||
ReactDOM.render(<MyToDoList />, document.getElementById('root'));
|
||
```
|
||
|
||
## --seed-contents--
|
||
|
||
```jsx
|
||
const textAreaStyles = {
|
||
width: 235,
|
||
margin: 5
|
||
};
|
||
|
||
class MyToDoList extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
// Change code below this line
|
||
|
||
// Change code above this line
|
||
this.handleSubmit = this.handleSubmit.bind(this);
|
||
this.handleChange = this.handleChange.bind(this);
|
||
}
|
||
handleSubmit() {
|
||
const itemsArray = this.state.userInput.split(',');
|
||
this.setState({
|
||
toDoList: itemsArray
|
||
});
|
||
}
|
||
handleChange(e) {
|
||
this.setState({
|
||
userInput: e.target.value
|
||
});
|
||
}
|
||
render() {
|
||
const items = null; // Change this line
|
||
return (
|
||
<div>
|
||
<textarea
|
||
onChange={this.handleChange}
|
||
value={this.state.userInput}
|
||
style={textAreaStyles}
|
||
placeholder='Separate Items With Commas'
|
||
/>
|
||
<br />
|
||
<button onClick={this.handleSubmit}>Create List</button>
|
||
<h1>My "To Do" List:</h1>
|
||
<ul>{items}</ul>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
# --solutions--
|
||
|
||
```jsx
|
||
const textAreaStyles = {
|
||
width: 235,
|
||
margin: 5
|
||
};
|
||
|
||
class MyToDoList extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
toDoList: [],
|
||
userInput: ''
|
||
};
|
||
this.handleSubmit = this.handleSubmit.bind(this);
|
||
this.handleChange = this.handleChange.bind(this);
|
||
}
|
||
handleSubmit() {
|
||
const itemsArray = this.state.userInput.split(',');
|
||
this.setState({
|
||
toDoList: itemsArray
|
||
});
|
||
}
|
||
handleChange(e) {
|
||
this.setState({
|
||
userInput: e.target.value
|
||
});
|
||
}
|
||
render() {
|
||
const items = this.state.toDoList.map((item, i) => {
|
||
return <li key={i}>{item}</li>;
|
||
});
|
||
return (
|
||
<div>
|
||
<textarea
|
||
onChange={this.handleChange}
|
||
value={this.state.userInput}
|
||
style={textAreaStyles}
|
||
placeholder='Separate Items With Commas'
|
||
/>
|
||
<br />
|
||
<button onClick={this.handleSubmit}>Create List</button>
|
||
<h1>My "To Do" List:</h1>
|
||
<ul>{items}</ul>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
```
|