警告Unkown Prop

Question

使用React.createClass({})，我可以很容易地将道具传递给子组件。如何用React.Component{}来实现

export default class Parent extends React.Component {
  // imported Child and in the render:
  render(){
    return <Child name={this.state.foo} />
  }
}

export default class Child extends React.Component {
}

警告不为人知的道具名称

Answer 1

传递支柱的方式是相同的，但是您需要检查是否正确地定义状态变量。请看下面的实现。以上错误可能有一套原因，即；

您使用的是{...this.props}还是cloneElement(元素，this.props)？您的组件正在将自己的道具直接传输到子元素(例如。https://facebook.github.io/react/docs/transferring-props.html)。在将道具转移到子组件时，应确保不意外地转发原打算由父组件解释的道具。 您正在本机DOM节点上使用一个非标准的DOM属性，可能是用来表示自定义数据。如果试图将自定义数据附加到标准DOM元素，请考虑使用MDN上描述的自定义数据属性。 React尚未识别您指定的属性。这很可能会在未来版本的React中得到解决。但是，React当前删除了所有未知的属性，因此在您的React应用程序中指定它们不会导致它们被呈现。

还要检查您正在使用的react的哪个版本，以及您是否正确地设置了react以使用ES6语法。

PS: --我使用的是0.14.8版本的代码片段

​

 class Parent extends React.Component {
  // imported Parent and in the render:
  constructor(){
    super();
    this.state = {
      foo: 'Hello World'
    }
  }
  render(){
    return <Child name={this.state.foo} />
  }
}

 class Child extends React.Component {
  
  render() {
    return (
      <div>{this.props.name}</div>
    )
  }
}


ReactDOM.render(<Parent />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container"></div>

​

Answer 2

以下是对警告的完整解释：https://facebook.github.io/react/warnings/unknown-prop.html

基本上，您似乎要将name支柱传递给不支持name属性的HTML元素。