将props传递给在props中接收到的组件

Question

我正在使用react，但我遇到了一个问题。

我有一个组件，它需要接受另一个组件作为prop，并将其他prop传递到同一个组件中。示例：

export default class Item extends React.Component {
    render() {
        return (<div onClick={this.props.onClick}>Some content.</div>)
    }
}

Item.propTypes = {
    onClick: PropTypes.func.isRequired
}

export default class Container extends React.Component {
    onClick() {
        // Do something.
    }
    render() {
        // render here the item and passing it my onClick method.
    }
}

Container.propTypes = {
    item: PropTypes.element.isRequired
}

编辑:所以我可能可以使用es5语法，这样做：

React.createElement(item, {
    onClick: this.onClick
});

但是我如何在es6中实现这一点呢？

Answer 1

这就是你需要做的，如果你需要通过所有的道具，你也可以使用扩展运算符。

export default class Item extends React.Component {
  render() {
    return (
      <div onClick={this.props.handleClick}>Some content.>
      </div>
      )
  }
}

Item.propTypes = {
  onClick: PropTypes.func.isRequired
}

export default class Container extends React.Component {

  render() {
    const handleClick = () => {
      // Do something.
    }
    // render here the item and passing it my onClick method.
    render () {
      return (
        <Item handleClick={handleClick} />
      );
    }
  }
}

Container.propTypes = {
  item: PropTypes.element.isRequired
}

Answer 2

你需要传递给Container，Item组件类型和你想要分配的道具，而不是一个实例。这样您就可以在创建实例之前添加更多道具

然后你可以这样做：

class Container extends React.Component {
    static propTypes = {
        ItemType: PropTypes.func.isRequired,
        itemProps: PropTypes.object.isRequired,
    };

    onItemClick = () => {
       // do something
    };

    render() {
        const { ItemType, itemProps } = this.props;
        return <ItemType {...itemProps} onClick={this.onItemClick} />;
    }
}

class MyDisplay extends React.Component {
    render() {
        const ItemToRender = someCondition ? Item : AnotherItem;
        return <Container ItemType={ItemToRender} itemProps={{a: 1, b: 2}} />;
    }
}