将自定义道具添加到自定义组件

Question

我已经构建了自己的自定义react-bootstrap Popover组件：

export default class MyPopover extends Component {
  // ...
  render() {
    return (
        <Popover {...this.props} >
           // ....
        </Popover>
    );
  }
}

该组件的呈现方式如下：

// ... my different class ...

  render() {

    const popoverExample = (
        <MyPopover id="my-first-popover" title="My Title">
          my text 
        </MyPopover >
    );

    return (
        <OverlayTrigger trigger="click" placement="top" overlay={popoverExample}>
          <Button>Click Me</Button>
        </OverlayTrigger>
    );
  }

现在，我想向MyPopover组件中添加自定义道具，例如：我的文字，并使用新道具在弹出框中设置一些内容，例如-

    <Popover {...this.props} className={this.getClassName()}>
       {this.showTheRightText(this.props)}
    </Popover>

但随后我在浏览器中收到此警告：

警告：popoverType标签上的未知道具。从元素中删除这些道具。

现在，我想我可以删除{...this.props}零件并逐个插入所有原始道具，而无需自定义道具，但是这样我就失去了“淡入淡出”效果，这也是处理此问题的丑陋方法。有更简单的方法吗？

Answer 1

更新的答案（React v16及更高版本）：

从 React v16开始
，您可以将自定义DOM属性传递给React组件。产生的问题/警告不再相关。更多信息。

原始答案（第v15版）：

这里最简单的解决方案是在将多余的东西prop发送到Popover组件之前简单地将其删除，并且有一个方便的解决方案。

export default class MyPopover extends Component {
  // ...
  render() {
    let newProps = Object.assign({}, this.props);  //shallow copy the props
    delete newProps.popoverType;  //remove the "illegal" prop from our copy.

    return (
        <Popover {...newProps} >
           // ....
        </Popover>
    );
  }
}

显然，您也可以（可能应该）在render()函数之外创建该变量。

基本上，您可以将所需的任何props内容发送到 自己的 组件，但必须先对其进行“清理”，然后再将其传递出去。在将所有react- bootstrap组件作为属性传递给DOM之前，先清除掉所有“非法”道具，但是它不能处理 您
可能提供的任何自定义道具，因此，您必须自己做一些内部整理工作。

从15.2.0版本开始，React开始发出此警告。这是文档对此的说明：

如果您尝试使用React无法识别为合法DOM属性/属性的道具来渲染DOM元素，则会触发unknown-
prop警告。您应确保您的DOM元素没有漂浮的虚假道具。

[…]

要解决此问题，复合组件应“消耗”用于复合组件而不是子组件的任何道具。

要进一步阅读，请 从官方反应网站上查看
此页面 。