React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
我平时工作中用的最多的应该算是各个元素之间通信,比如点击一个按钮,另一个按钮打开或者灰掉,全选,动态显示表格等等。在 React 里面就是组件之间的通信。
主要是分为三类:
1. 子组件向父组件通信
下面这个例子的效果是,在文本框中输入邮箱,会在一个 div 中同时显示出来;
这个文本框就是子组件,div 就是父组件;
这里还记得 props 么? -------- 组件里面定义的属性,我们可以通过 this.props.xxx 来使用这个属性或者方法;
首先在父组件中定义一个处理函数来处理状态的变化,然后子组件也同时引用这个函数,子组件在使用的时候父组件可以通过这个函数获取相应的值,并用来自己使用;
概况起来说:react 中 state 改变了,组件才会 update。父写好 state 和处理该 state 的函数,同时将函数名通过 props 属性值的形式传入子,子调用父的函数,同时引起 state 变化。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- react-hello-world
- </title>
- <script src="react.js">
- </script>
- <script src="react-dom.js">
- </script>
- <script src="babel.min.js">
- </script>
- </head>
- <body>
- <div id="app">
- </div>
- <script type='text/babel'>
- class Child extends React.Component {
- constructor(props) {
- super(props);
- }
- render() {
- return ( < div > 请输入邮箱: < input onChange = {
- this.props.handleEmail
- }
- />
- </div > )
- }
- }
- //父组件,此处通过event.target.value获取子组件的值
- class Parent extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- email: ''
- }
- }
- handleEmail(event) {
- this.setState({
- email: event.target.value
- });
- }
- render() {
- return ( < div > <div > 用户邮箱: {
- this.state.email
- } < /div>
- <Child name="email" handleEmail={(e)=>{this.handleEmail(e)}}/ > </div>
- )
- }
- }
- ReactDOM.render(
- <Parent / > , document.getElementById('app'));
- </script>
- </body>
- </html>
2. 父组件向子组件通信
下面这个例子的效果就是勾选一个 chekbox 后,下面 div 中会提示是 true or false;
checkbox 就是父组件,div 是子组件;
其实也是利用了 props 这个属性来实现的,这次是把 checkbox 的属性定义在子组件的属性中,然后子组件通过 this.props.xxx 来获取。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- react-hello-world
- </title>
- <script src="react.js">
- </script>
- <script src="react-dom.js">
- </script>
- <script src="babel.min.js">
- </script>
- </head>
- <body>
- <div id="app">
- </div>
- <script type='text/babel'>
- class Child extends React.Component {
- constructor(props) {
- super(props);
- }
- render() {
- return ( < div > 是否选中: < span > {
- this.props.isSelect ? "true": "false"
- } < /span>
- </div > )
- }
- }
- class Parent extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isSelect: true
- }
- }
- handleChange() {
- this.setState(prevState = >{
- return {
- isSelect: !prevState.isSelect
- }
- });
- }
- render() {
- return ( < div > <input type = "checkbox"checked = {
- this.state.isSelect
- }
- onChange = { () = >this.handleChange()
- }
- />
- <Child isSelect={this.state.isSelect}/ > </div>
- )
- }
- }
- ReactDOM.render(
- <Parent / > , document.getElementById('app'));
- </script>
- </body>
- </html>
3 没有任何嵌套关系的组件之间传值(PS:比如:兄弟组件之间传值)
下面这个例子就是用一个按钮去清除文本框的内容;
文本框和按钮都是父组件中的子组件;
子组件不能直接跟子组件通信,需要用父组件做一个中介,来实现通信;
首先是文本框组件通过 this.props.handleChange 这个函数来和父组件建立联系,把文本框输入的值通过 this.handleChange 的
e.target.value 传递给父组件,父组件再通过 this.state.text 这个属性,传递给文本框组件,使得文本框能够显示输入的内容;然后按
钮组件通过 this.props.handleClick 这个函数和父组件 this.handleClick 建立联系,通过这个函数来改变 this.state.text 的值,从而改
变文本框的内容;
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- react-hello-world
- </title>
- <script src="react.js">
- </script>
- <script src="react-dom.js">
- </script>
- <script src="babel.min.js">
- </script>
- </head>
- <body>
- <div id="app">
- </div>
- <script type='text/babel'>
- class Child extends React.Component {
- constructor(props) {
- super(props);
- }
- render() {
- return ( < div > <input type = "text"value = {
- this.props.text
- }
- onChange = { (e) = >{
- this.props.handleChange(e)
- }
- }
- />
- </div > )
- }
- }
- class Child2 extends React.Component {
- constructor(props) {
- super(props);
- }
- render() {
- return ( < div > <button onClick = { () = >{
- this.props.handleClick()
- }
- } > 清除 < /button>
- </div > )
- }
- }
- class Parent extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- text: "",
- }
- }
- handleClick() {
- this.setState({
- text: ""
- });
- }
- handleChange(e) {
- this.setState({
- text: e.target.value
- })
- }
- render() {
- return ( < div > <Child text = {
- this.state.text
- }
- handleChange = { (e) = >{
- this.handleChange(e)
- }
- }
- />
- <br/ > <Child2 handleClick = { () = >{
- this.handleClick()
- }
- }
- />
- </div > )
- }
- }
- ReactDOM.render( < Parent / >, document.getElementById('app'));
- </script>
- </body>
- </html>
说实话,上面这些功能如果用 jq 的话其实就几句话是事情 -。- 可能是目前还没设计到复杂的组件,所以看不出 react 的优点
来源: http://www.phperz.com/article/17/0322/326602.html