使用 React.cloneElement 时出现未知道具警告答案

【问题标题】：Unknown Prop Warning when React.cloneElement used使用 React.cloneElement 时出现未知道具警告
【发布时间】：2018-08-31 09:36:54
【问题描述】：

我有一个为弹出窗口构建的 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 组件。但我想咨询社区是否有更好的方法

【问题讨论】：

这个工作{React.cloneElement(this.props.children, ...this.props)}吗？
你为什么要preventDefault？只有使用 dom 识别的事件名称才能接收事件。
@Bhojendra Rauniyar 它可以工作，但是closePopup 不会作为道具传递给子元素。
@Daniel Lizik 假设我在PopupContent 中有一个<a href="#">Close</> 来关闭它。您的观点已被采纳，没有必要（或可能导致问题）。但我遇到的问题与此无关
closePopup 函数需要传递给子元素以便执行它，这需要您的子元素是一个 React 组件。在这种情况下，您需要确保子组件是 React 组件

标签： javascript reactjs ecmascript-6

【解决方案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>)
}

【讨论】：

this.props.children 可以包含一个 HTML DOM 元素或一个 React 组件，因此无需迭代。当子元素是 HTML DOM 元素时，closePopup 是无效属性，因此我收到未知道具警告。但是当 child 是 React 组件时，closePopup 是我可以传递的有效道具。
当它是 HTML DOM ELEMENT 时，您会收到警告，因为 closePopup 不是有效的 html 属性
正确。我可以查看孩子的类型并有条件地删除closePopup prop。

【解决方案2】：

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

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

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

【讨论】：

这是我在问题中提到的reactjs.org/warnings/unknown-prop.html 的直接引用。我知道这是因为 closePopup 是无效的 HTML 属性。而且我没有将道具传递给孩子的问题。问题是子元素既可以是 HTML 元素，也可以是 React 组件。属性closePopup 前者无效，后者有效

【解决方案3】：

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

如果子元素是 HTML DOM 元素，则以下条件将为 true。

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

【讨论】：