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 {
}

警告未知道具＆＃39;名称＆＃39;

Answer 1

传递prop的方式是相同的，但是您需要检查是否正确定义了状态变量。请看下面的实现。上述错误可能有一系列原因，即;

您使用的是{... this.props}还是cloneElement（element，this.props）？   您的组件将自己的道具直接转移给孩子   元素（例如   https://facebook.github.io/react/docs/transferring-props.html）。什么时候   将道具转移到儿童组件，你应该确保你   不是意外地转发了预定的道具   由父组件解释。

您在本机DOM节点上使用非标准DOM属性，   也许代表自定义数据。如果您尝试附加自定义   数据到标准DOM元素，请考虑使用自定义数据属性   如MDN所述。

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元素。

警告未知的道具

2 个答案: