Unknown Prop Предупреждение

Question

Я получаю сообщение об ошибке, когда я работаю с детьми с реквизитом

Unknown prop близко on <h3> tag. Remove this prop from the element..

Я создал родительский блок:

var Block = React.createClass({ 
    getInitialState: function() { 
    return {open: true} 
    }, 

    close: function() { 
    this.setState({open: false}); 
    }, 

    render: function() { 
    var childrenWithProps = React.Children.map(this.props.children,  function(child) { 
     return React.cloneElement(child, { 
      close: this.close 
     }) 
    }.bind(this)); 

    return (
     <div> 
      {childrenWithProps} 
     </div> 
    ) 
} 
}); 

и использовать его в другом компоненте:

var Elm = React.createClass({ 
render: function() { 
    return (
     <Block> 
      <h3>Hi</h3> 
      <button type="button" onClick={this.props.close}>Close</button> 
     </Block> 
    ) 
} 
}); 

Я знаю, что это потому, что <h3> не close, но button имеет его.

Как это исправить?

спасибо.

Answer 1

Вы получаете эту ошибку, потому что вы картирование React.Children, которые внутренне итерируют ребенок в Block компоненты (в том числе <h3> тега), а затем присваивает close свойства к нему.

Why you should pay attention to this warning.

Но обратите внимание, что ни <h3>, ни <button> имеет close свойство, то, что <button> вместо этого является this.prop.close значение, переданное в качестве onClick собственности.

Что вы можете сделать, это установить некоторые атрибуты, чтобы служить в качестве флага для вашего Block компонента, так что вы можете рассматривать его как «близкий элемент», давайте назовем его closeEmitter:

Block.render()

var self = this; 

var childrenWithProps = React.Children.map(function(child) { 
    let extension = child.props.closeEmitter ? { onClick: self.close } : {} 
    React.cloneElement(child, extension); 
}); 

return <div> 
    { childrenWithProps } 
</div> 

Elm.js

var Elm = React.createClass({ 
    render: function() { 
    return <Block> 
     <h3>Hi</h3> 
     <button type="button" closeEmitter={ true }>Close</button> 
    </Block> 
    } 
}); 

Answer 2

Просто переименуйте свою опору с «закрыть» в «данные-закрыть». Вот и все.