ReactJS组件关系是一层套一层，DOM结构，组件结构比较清晰
父组件
子组件
<!DOCTYPE html> <html> <head lang="en"> <Meta charset="UTF-8" /> <title>React组件通信</title> <script src="react.js"></script> <script src="react-dom.js"></script> <!-- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>--> <script type="text/javascript" src="browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Parent=React.createClass( { handleClick:function () { //this.refs.child,getDOMNode().style.color="red"; ReactDOM.findDOMNode(this.refs.child).style.color="green"; },render:function () { return ( <div onClick ={this.handleClick}>Parent is: <Child name={this.props.name} ref="child"></Child> </div> ); } } ); var Child=React.createClass({ render:function () { return <span>{this.props.name}</span>; } }); ReactDOM.render(<Parent name="拉时空的"/>,document.getElementById("example")); </script> </body> </html>
1.父组件如何调用子组件注意：React 15+ this.refs.名字,getDOMNode()改为ReactDOM.findDOMNode(this.refs.名字)
2.子组件如何调用父组件
this.props
原文链接：https://www.f2er.com/react/302806.html