<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var Parent = React.createClass({
handleClick : function () {
React.findDOMNode(this.refs.myTestInput).focus();
},
render : function () {
return (
<div onClick={this.handleClick} className="aaa">
<input type="text" ref="myTestInput" />
<Child name={this.props.name}></Child>
</div>
)
}
})
var Child = React.createClass({
render: function () {
return (
<div>{this.props.name}</div>
)
}
})
React.render(
<Parent name="11111111111" />,
document.getElementById('example')
)
</script>
</body>
组件之间的通信
先创建一个父类组件Parent，它内部调用一个叫做Child的子组件，并将接收到的外部参数name传递给子组件Child。
再创建一个子类组件Child
然后通过React.render方法将组件渲染到页面上
- 子组件调用父组件的方法。从上面的例子可以看出，子组件要拿到父组件的属性，需要通过this.props方法。所以，如果子组件想要调用父组件的方法，只需要父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可通过"this.props.被调用的方法"这样的方式拿到name属性的。然后，每次父组件修改了传入的name属性，子组件便会得到通知，然后自动获取新的name属性
- 父组件调用子组件的方法。子组件调用父组件是通过prop属性，而反过来，父组件调用子组件通过的就是 ref 属性。子组件被设置了ref属性之后，父组件便可以通过this.ref.xxx来获取到子组件了，其中xx为子组件的ref值。