警告未知支柱

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

警告未知道具“名”

来源

2016-09-12 Sylar

传递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>

来源

2016-09-12 06:59:31

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

基本上，它似乎要传递的name支撑下来的HTML元素不支持name属性。

来源

2016-09-12 06:50:09

警告未知支柱

回答

相关问题