将自定义props添加到自定义组件

IT技术 reactjs react-bootstrap
2021-03-29 10:10:59

我已经构建了自己的自定义 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组件添加自定义props，例如：我的文本并使用新props在弹出窗口中设置一些内容，例如 - 

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

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

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

现在，我想我可以只删除{...this.props}部分并在没有自定义props的情况下将所有原始props一个一个地插入，但是这样我就失去了“淡入淡出”的效果，而且这是处理这个问题的一种丑陋的方法。有没有更简单的方法来做到这一点？

1个回答

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

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

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

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

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

[...]

为了解决这个问题，复合组件应该“消耗”任何用于复合组件而不是用于子组件的props。

如需进一步阅读，请从官方 react 站点查看此页面。

其它你可能感兴趣的问题
上一篇react力背景颜色全高 下一篇在react中从父级调用子组件方法