将自定义道具添加到自定义组件 [英] Add custom props to a custom component

问题描述

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

I've built my own custom react-bootstrap Popover component:

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

Now, I want to add custom props to MyPopover component like that: my text And to use the new props to set some things in the popover for example -

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

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

but then I get this warning in the browser:

警告:标签上有未知的道具 popoverType.从元素中移除这些道具.

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

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

Now, I guess that I can just remove the {...this.props} part and insert all the original props one by one without the custom props, but In this way I lose the "fade" effect and also it's an ugly way to handle this problem. Is there an easier way to do it?

推荐答案

更新答案(React v16 及更早版本):

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

Updated answer (React v16 and older):

As of React v16, you can pass custom DOM attributes to a React Component. The problem/warning generated is no longer relevant. More info.

这里最简单的解决方案是在将额外的 prop 发送到 Popover 组件之前简单地删除它，这是一个方便的解决方案.

The easiest solution here is to simply remove the extra prop before sending it to the Popover component, and there's a convenient solution for doing that.

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() 函数之外创建该变量.

Obviously you can (and probably should) create that variable outside your render() function as well.

基本上，您可以将任何props 发送到您自己的 组件，但您必须清理"组件.在通过它之前.所有 react-bootstrap 组件都从非法"组件中清除.props 在作为属性传递给 DOM 之前，但是它不处理您可能提供的任何自定义 props，因此为什么您必须自己做一些内务处理.

Basically you can send any props you want to your own component, but you'd have to "clean" it before passing it through. All react-bootstrap components are cleansed from "illegal" props before being passed as attributes to the DOM, however it doesn't handle any custom props that you may have provided, hence why you have to do your own bit of housekeeping.

React 从 15.2.0 版开始抛出此警告.以下是文档对此的说明:

React started throwing this warning as of version 15.2.0. Here's what the documentation says about this:

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

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.

要进一步阅读，请查看此页面 来自官方反应网站.

这篇关于将自定义道具添加到自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！