我已经构建了自己的自定义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组件中添加自定义道具,例如:我的文字,并使用新道具在弹出框中设置一些内容,例如-
MyPopover
<Popover {...this.props} className={this.getClassName()}> {this.showTheRightText(this.props)} </Popover>
但随后我在浏览器中收到此警告:
警告:popoverType标签上的未知道具。从元素中删除这些道具。
popoverType
现在,我想我可以删除{...this.props}零件并逐个插入所有原始道具,而无需自定义道具,但是这样我就失去了“淡入淡出”效果,这也是处理此问题的丑陋方法。有更简单的方法吗?
{...this.props}
从 React v16开始 ,您可以将自定义DOM属性传递给React组件。产生的问题/警告不再相关。更多信息。
这里最简单的解决方案是在将多余的东西prop发送到Popover组件之前简单地将其删除,并且有一个方便的解决方案。
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()函数之外创建该变量。
render()
基本上,您可以将所需的任何props内容发送到 自己的 组件,但必须先对其进行“清理”,然后再将其传递出去。在将所有react- bootstrap组件作为属性传递给DOM之前,先清除掉所有“非法”道具,但是它不能处理 您 可能提供的任何自定义道具,因此,您必须自己做一些内部整理工作。
props
react- bootstrap
从15.2.0版本开始,React开始发出此警告。这是文档对此的说明:
如果您尝试使用React无法识别为合法DOM属性/属性的道具来渲染DOM元素,则会触发unknown- prop警告。您应确保您的DOM元素没有漂浮的虚假道具。 […] 要解决此问题,复合组件应“消耗”用于复合组件而不是子组件的任何道具。
如果您尝试使用React无法识别为合法DOM属性/属性的道具来渲染DOM元素,则会触发unknown- prop警告。您应确保您的DOM元素没有漂浮的虚假道具。
[…]
要解决此问题,复合组件应“消耗”用于复合组件而不是子组件的任何道具。
要进一步阅读,请 从官方反应网站上查看 此页面 。