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

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>

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

Warning: Unknown props popoverType on tag. Remove these props from the element.

现在，我想我可以删除 {...this.props} 部分并在没有自定义道具的情况下将所有原始道具一一插入，但是这样我就失去了 "fade" 效果，并且这是处理这个问题的丑陋方法。有更简单的方法吗？

Answer 1

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

从 React v16 开始，您可以将自定义 DOM 属性传递给 React 组件。生成的 problem/warning 不再相关。 More info.

原始答案（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 之前从“非法”道具中清除，但是它不处理 you 可能拥有的任何自定义道具提供，因此为什么你必须自己做一些家务。

React 从 version 15.2.0 开始抛出这个警告。以下是文档对此的说明：

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

[...]

To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component.

如需进一步阅读，请查看官方 React 站点的 this page。

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

Add custom props to a custom component

reactjs

react-bootstrap

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

原始答案（React v15）：