将道具传递给不同组件的映射数组

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>
    );
}

将道具传递给不同组件的映射数组

Pass props to a mapped array of different components

javascript

reactjs

react-jsx