React.js & [...] (распространение) синтаксис

Question

На основе примера на странице: https://redux.js.org/basics/usage-with-react

У нас есть следующий элемент:

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

Также у нас есть:

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

Можеткто-то, пожалуйста, скажите мне, что {{todo} в приведенном выше коде?

Я знаю, что оператор ... является синтаксисом распространения и используется, скажем, как [... todos, newTodoItem](чтобы объединить новый элемент задачи в старый список задач).Но в приведенном выше примере todo item не является массивом, и кажется, что он генерирует объект.Для меня это выглядит так, что {... todo} равно {todo}.

Кроме того, какие свойства присваиваются компоненту?

Answer 1

... также можно использовать для распределения объектов, а не только массивов.Например,

// Using rest syntax here
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; 
x; // 1
y; // 2
z; // { a: 3, b: 4 }

// Using spread here
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

В приведенном выше случае todos - это массив объектов, содержащий ключи completed и text.Вместо того, чтобы вручную передавать реквизиты, как это -

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} completed={todo.completed} text={todo.text} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

Мы используем синтаксис разброса для добавления пар ключ-значение в качестве реквизитов.Вы можете думать об этом как о синтаксическом сахаре.

Answer 2

const obj = {a: 1, b: 2, c: 3};

<MyComponent {...obj} /> совпадает с <MyComponent a={1} b={2} c={3} />.Таким образом, вы используете spread operator ... для извлечения элементов из объекта или массива.

Outside React, если const test={a: 1, b:2 }, то const x = {test} //es6 feature аналогично const x = {test: test}.Так что это то же самое, что и const x = {test: {a: 1, b:2}}

Где как, <MyComponent {obj} /> создает ошибку в React, потому что внутри MyComponent, как называется опора, которую можно использовать для доступа, передано obj ?.Здесь ничего нет.Отсюда и ошибка.

function MyComponent(props) {
 // What is props.? to access obj
}

Итак, вы используете реквизит с именем,

<MyComponent x={obj} />

function MyComponent(props) {
 // props.x has obj
 // props.x = obj
 console.log(props.x);
 return <div />
}

Но оператор распространения автоматически присваивает имена реквизитов с ключами объекта и значениями в качестве значений объекта, как показано в началеэтот ответ.

Как вы сказали в своем вопросе, const newTodos = [...todos, newItem] создает новый массив со старыми задачами, распределенными из todos, и добавляет дополнительные newItem.Если вы не распространили todos, это создаст newTodos = [[todo1, todo2],newItem].

Answer 3

... todo используется для передачи реквизита компоненту Todo.В пропо-типах Todo вы можете видеть два реквизита переменного типа.итак ... оператор распространяет (передает) реквизит компонента Todo