Неизвестный проп Предупреждение при использовании React.cloneElement

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.

Предупреждение: React не распознает closePopup реквизит элемента DOM.

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

Я мог бы использовать методы, объясненные здесь дляразличать элемент 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>)
}

• Элемент клона
• React.Children.map

Answer 2

В итоге я проверил тип дочернего элемента и условно удалил реквизит closePopup

Следующим условием будет true, если дочерний элемент является элементом HTML DOM.

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

Answer 3

Предупреждение unknown-prop сработает, если вы попытаетесь отобразить элемент DOM с пропом, который не распознается React как допустимый атрибут / свойство DOM.Вы должны убедиться, что ваши DOM-элементы не имеют паразитных реквизитов, плавающих вокруг.

Вы должны убедиться, что вы случайно не пересылаете реквизиты, которые были предназначены для интерпретации родительским компонентом.

Также выможно использовать формат {...this.props} для передачи данных вместо использования cloneElement(element, this.props)