Как передать массив элементов в React.js

Question

const ListItem = React.createClass({
  render: function() {
    return <li > {
      this.props.item
    } < /li>;
  }
});

const ToDoList = React.createClass({
  render: function() {

    const todoItems = this.props.items.map(item => {
      return <ListItem item = {
        item
      } > < /ListItem>
    })

    return ( <
      ul > {
        todoItems
      } < /ul>
    );
  }
});

//creating a basic component with no data, just a render function
const MyApp = React.createClass({
  render: function() {
    return ( <
      div className = "well" >
      <
      h1 > Hello < /h1> <
      ToDoList > < /ToDoList> <
      /div>
    );
  }
});

//insert the component into the DOM
ReactDOM.render( < MyApp / > , document.getElementById('container'));



<
div id = "container" > < /div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Учебник ReactJs говорит:

Если мы хотим сделать этот список действительно расширяемым, мы могли бы создать массив элементов, затем передать их в подпорки через компонент ToDoList, а затем визуализировать каждый элемент. Давайте сделаем это сейчас.

Как я могу передать массив элементов в приведенном выше коде?

Answer 1

Данные могут быть переданы в компоненты через реквизит.

https://facebook.github.io/react/tutorial/tutorial.html

В вашем случае реквизиты будут доступны внутри компонентов через this.props,

<TodoList /> принимает реквизит под названием items, который является массивом. внутри <TodoList /> вы можете отобразить через этот массив и вернуть элементы.

Например, в методе рендеринга вашего класса вы бы вернули TodoList с подпоркой элементов:

const myItems = [{ name: 'item 1' }, { name: 'item2' }];
function MyApp() {
    return (
       <TodoList items={myItems} />
    );
}

Затем в TodoList вы отображаете элементы

function TodoList({ items }) {
    return items.map(item => (
        <h1>{item.name}</h1>
    ));
}

Answer 2

Вы просто устанавливаете атрибут с тем же именем

<ToDoList items={myitems} />