javascript - 将 props 传递给不同组件的映射数组

Question

我有一组具有不同名称的导入 React 组件，我想迭代它们并将相同的 props 传递给每个组件，但我找不到正确执行此操作的方法。

这是我以伪代码形式获得的内容:

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>