Цитирование через несколько элементов и рендеринг каждого

Question

У меня возникают проблемы с обертыванием головы вокруг. Реагируйте на цикл, чтобы визуализировать компонент несколько раз подряд. Вот что у меня есть, но это не работает. Некоторые указания относительно того, что я делаю неправильно, и лучший способ сделать это, оценили бы, спасибо!

const users = [ 
    { 
     "firstName": "John", 
     "lastName": "Doe" 
    }, { 
     "firstName": "Anna", 
     "lastName": "Smith" 
    }, { 
     "firstName": "Peter", 
     "lastName": "Jones" 
    } 
]; 

function Welcome(props) { 
    return <h1>Hello, {props.firstName} {props.lastName}</h1>; 
} 

function allUsers(){ 
    return (
     <div> 
      {for(var i=0; i<users.length; i++){ 
       <Welcome firstName={users[i].firstName} lastName={users[i].lastName}/> 
      }} 
     </div> 
    ) 
} 

ReactDOM.render(
    allUsers(), 
    document.getElementById('root') 
); 

Answer 1

Попробуйте использовать .map вместо цикла for. Это, как правило, легче использовать в React:

const users = [ 
 
    { 
 
     "firstName": "John", 
 
     "lastName": "Doe" 
 
    }, { 
 
     "firstName": "Anna", 
 
     "lastName": "Smith" 
 
    }, { 
 
     "firstName": "Peter", 
 
     "lastName": "Jones" 
 
    } 
 
]; 
 

 
function Welcome(props) { 
 
    return <h1>Hello, {props.firstName} {props.lastName}</h1>; 
 
} 
 

 
function allUsers(){ 
 
    return (
 
     <div> 
 
      {users.map(function(user) { 
 
       return <Welcome key={user.firstName} firstName={user.firstName} lastName={user.lastName}/> 
 
      })} 
 
     </div> 
 
    ) 
 
} 
 

 
ReactDOM.render(
 
    allUsers(), 
 
    document.getElementById('View') 
 
);

<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="View"></div>

Answer 2

Кроме того, поскольку это не большая стена кода, и вы используете ES6 я позволил себе переписать весь код, чтобы показать вам «лучший способ сделать Это".

const users = [ 
    { 
     "firstName": "John", 
     "lastName": "Doe" 
    }, { 
     "firstName": "Anna", 
     "lastName": "Smith" 
    }, { 
     "firstName": "Peter", 
     "lastName": "Jones" 
    } 
]; 

const Welcome = ({firstName, lastName}) => <h1>Hello, {firstName} {lastName}</h1>; 

const AllUsers =() => (
     <div> 
      { 
      users.map((user, key) => <Welcome key={key} firstName={user.firstName} lastName={user.lastName} />) 
      } 
     </div> 
) 

ReactDOM.render(
    <AllUsers />, 
    document.getElementById('root') 
);