Передача реквизитов в сопоставленную массив различных компонентов

Question

У меня есть массив импортированных компонентов React с разными именами, и я бы хотел их перебрать и передать те же реквизиты для каждого из них, но я не могу найти способ сделать это правильно.

Вот что я имею в виде псевдокода:

const myArray = [ 
    <Component1 />, 
    <Component2 />, 
    <Component3 />, 
]; 

render() { 
    return(
    <div> 
     {myArray.map(ComponentX => {ComponentX})} // pass the same props into these components? 
    </div> 
); 
} 

Answer 1

Не используйте JSX внутри массива, и вы должны быть хорошо:

class Component1 extends React.Component { 
 
    render() { 
 
    return <div>{this.props.prop}</div>; 
 
    } 
 
} 
 

 
class Component2 extends React.Component { 
 
    render() { 
 
    return <div>{this.props.prop}</div>; 
 
    } 
 
} 
 

 
const myArray = [ 
 
    Component1, 
 
    Component2, 
 
]; 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     {myArray.map(ComponentX => <ComponentX prop="Hello World!" />)} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App/>, 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

Вы можете сделать это с React.cloneElement():

render() { 
    const myArray = [ 
     <Component1 />, 
     <Component2 />, 
     <Component3 />, 
    ]; 
    const extraProps = { 
     foo: 'bar' 
    }; 

    return (
     <div> 
      {myArray.map(comp => React.cloneElement(comp, extraProps))} 
     </div> 
    ); 
}