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中设置一些东西例如 -

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

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

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

现在，我猜我可以删除{...this.props}部分，并在没有自定义道具的情况下逐个插入所有原始道具，但是这样我就失去了＆＃34; fade＆＃34;效果，这也是处理这个问题的一种丑陋方式。有没有更简单的方法呢？

Answer 1

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

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

原始答案（React v15）：

此处最简单的解决方案是在将In [78]: toConvert Out[78]: x y z 0 1 10 (101, 102, 103) 1 2 20 (201, 202) In [79]: np.column_stack((toConvert[['x','y']].values.\ ...: repeat(map(len,toConvert.z),axis=0),np.hstack(toConvert.z))) Out[79]: array([[ 1, 10, 101], [ 1, 10, 102], [ 1, 10, 103], [ 2, 20, 201], [ 2, 20, 202]])发送到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，但您必须＆＃34;清理＆＃34;它在传递之前。所有react-bootstrap组件都被清除，并且＃34;非法＆＃34;在作为属性传递给DOM之前的道具，但是它不会处理你可能提供的任何自定义道具，因此你必须自己做一些家务管理。

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

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

[...]

要解决这个问题，复合组件应该＆＃34;消费＆＃34;任何用于复合组件而不是用于子组件的道具。

如需进一步阅读，请查看官方反应网站的this page。

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

1 个答案:

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

原始答案（React v15）：