Question

我有一个为弹出窗口构建的React组件。 PopupContent将作为子元素接收DOM元素或另一个React组件。

class PopupContent extends React.Component {
    render() {
        return(
            <div>
                {React.cloneElement(this.props.children, {closePopup:this.props.closePopup})}
            </div>
        );
    }
}

closePopup道具设置一个标志来显示/隐藏弹出窗口

closePopup(event){
    event.preventDefault();
    this.setState({
        popupInView: false
    })  
}

将closePopup传递给子级的原因是要关闭子级组件的弹出窗口。

如果子项是自定义的React组件，则此设置效果很好：

<PopupContent>
    <ContentOfThePopup />
</PopupContent>

但是如果孩子是DOM元素，我会得到Unknown Prop Warning。

警告：React无法识别DOM上的closePopup道具元素。

<PopupContent>
    <div>Content Of The Popup </div>
</PopupContent>

我可以使用here中介绍的技术来区分DOM元素和React组件。但我想向社区咨询是否有更好的方法

Answer 1

this.props.children包含什么？你不应该迭代吗？

render() {

  return React
    .Children

    // this is the jsx version of cloneElenemnt,
    // better to use in a render function
    .map(Child => <Child.type ...Child.props ...this.props>)
}

Answer 2

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

您应确保您不会意外转发原本由父组件解释的道具。

您还可以尝试使用{...this.props}格式来传递数据，而不是使用cloneElement(element, this.props)

Answer 3

我最终检查了孩子的类型并有条件地移除了道具closePopup

如果子元素是HTML DOM元素，则跟踪条件为true。

typeof this.props.children.type === 'string

使用React.cloneElement时出现未知的Prop警告

3 个答案: