Как Array.map() работает с реагирующими компонентами?
Я новичок в реагировании, я работаю над школьным проектом. В нем я использую метод Array.map для рендеринга моего компонента в DOM. Он работает нормально, но у меня есть небольшая путаница с методом map() в массиве. Когда я изучал Javascript, я использовал Array.map и сохранял новый метод Array from map() в переменную. например const newArray = Array.map(e => e*2). Итак, из документов MDN я знаю, что карта возвращает новый массив. Итак, теперь в реакции я увидел пример, и они не сохраняют Array.map результат в новой переменной, так где же этот новый массив существует после сопоставления старого массива, который был изменен, они просто используют Array.map(e => e*2) не сохраняя возвращенный новый массив ни в какую переменную? Для примера ниже, где они сохраняют возвращенный новый массив после сопоставления с incompleteTodos.
Итак, я что-то упустил из метода Array.map? P.S. Код ниже работает нормально.
const incompleteTodos = this.state.todos.filter(todo => !todo.completed);
<div className = "todos">
{incompleteTodos.length > 0 && <h2 className = "incomplete">Incomplete</h2> }
{
incompleteTodos.map(todo => (
<Todo key = {todo.id} removeTodo = {this.removeTodo} completeTodo = {this.completeTodo} todo = {todo}/>
))
}
для проверки ссылки reactjs.org/docs/jsx-in-depth.html#jsx-дети
Посмотрите и это, reactjs.org/docs/lists-and-keys.html
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Переменная печати автоматически программируется внутри функции render() в JSX, она работает. Это особенность ReactJS, которая воздерживается от создания слишком большого количества переменных для использования. Итак, если у вас есть такой код:
render() {
return(
<h1>{1+1}</h1>{// It will print '2' on the browser}
);
}
Но способ использования Array.map() в качестве переменной все еще приличный и приемлемый, но код, который вы показали выше, кажется, лучше работает с реагирующим кодом, так что не беспокойтесь об этом.
Удачного кодирования!
Посмотрите пример ниже,
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const myTodos = [<div>Hi1</div>,<div>Hi2</div>,<div>Hi3</div>,]
// Created a array to return
class App extends Component {
render() {
return (
<div className = "App">
{myTodos}
<header className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className = "App-link"
href = "https://reactjs.org"
target = "_blank"
rel = "noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Вот ссылка для получения дополнительной информации, reactjs.org/docs/lists-and-keys.html
Метод map действительно возвращает массив компонентов Todo. Этот массив используется React для рендеринга элементов.
Код, который вы разместили, эквивалентен:
const incompleteTodos = this.state.todos.filter(todo => !todo.completed);
const items = incompleteTodos.map(todo => (
<Todo key = {todo.id} removeTodo = {this.removeTodo} completeTodo = {this.completeTodo} todo = {todo} />
));
<div className = "todos">
{incompleteTodos.length > 0 && <h2 className = "incomplete">Incomplete</h2> }
{items}
в JSX вы можете добавить
html element,stringиarray of element or string. Вот вам и `неполныйTodos.map`, возвращающийсяarray of Todo. вот почему нам не нужно хранить его в другой переменной