<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/react/0.14.1/react.js"></script> <script src="http://cdn.bootcss.com/react/0.14.1/react-dom.js"></script> <script src="http://cdn.bootcss.com/babel-core/5.8.32/browser.min.js"></script> </head> <body> <div id="App"> </div> </body> <script type="text/babel"> class ParentComp extends React.Component{ constructor(...args){ super(...args); this.state = { value:1 } } fn(){ this.setState({ value: this.state.value + 1 }) } render(){ return ( <div> <input type = "button" value = "aaa" onClick = {this.fn.bind(this)} /> <ChildComp name = {this.state.value} />//为ChildComp组件指定了一个name属性 </div> ) } } class ChildComp extends React.Component{ render(){ return <span>{this.props.name}</span>//在组件类中使用props获取属性 } } window.onload = function(){ var div = document.getElementById('App'); ReactDOM.render( <ParentComp/>, div ); } </script> </html>
在父组件的输出中可以引用子组件。 属性是从父组件传递给子组件的。
组件的属性：
指定属性：一般是在< />这种标签中指定属性，这时候属于
获取属性：在组件类中使用this.props获取属性
上例中，我们在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。而最后的渲染只需要渲染父组件即可。