Comment passer un tableau d'éléments dans 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>

Un tutoriel ReactJs dit :

Si nous voulons faire de cette liste une liste vraiment extensible, nous pourrions créer un tableau d'éléments, puis les passer dans les props par le biais du composant ToDoList, puis effectuer le rendu de chaque élément. Faisons cela maintenant.

Comment puis-je passer le tableau d'éléments dans le code ci-dessus ?

Answer 1

Les données peuvent être transmises aux composants via des props.

https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props

Dans votre cas, les props sont accessibles à l'intérieur des composants par l'intermédiaire de this.props .

<TodoList /> prend une propriété appelée items qui est un tableau. À l'intérieur de <TodoList /> vous pouvez parcourir ce tableau et retourner des éléments.

Par exemple, dans la méthode de rendu de votre classe, vous renverrez TodoList avec une proposition d'éléments :

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

Ensuite, dans TodoList, vous faites correspondre les éléments

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

Answer 2

Vous venez de mettre en place un attribut, avec le même nom

<ToDoList items={myitems} />