React基础之脚手架（三）- 组件传值

脚手架 - 组件传值

麒麒（小姐姐哦）来啦！！！今天的内容是`组件传值`
代码是看不会的！！！~~~ 一定要动手呦！
如果对你有帮助 就支持下我呦！♥

一、组件传值方式

1. 正向传值
   即父组件向子组件传值。父组件中绑定一个属性，并赋值，子组件通过props获取即可。
2. 逆向传值
   即子组件向父组件传值。子组件中有值想要传递给父组件
3. 同级传值

二、正向传值

正向传值在之前的文章中频繁使用，这里就不过多说明啦，小伙伴们手动翻找哦！
React基础之脚手架（）- props与state

三、逆向传值

场景：子组件的值想要传递给父组件

步骤：

1. 在子组件中定义要传递给父组件的值

2. 在子组件中定义数据发送，如使用button的onClick事件，传递值

3. 父组件中，定义事件，获取数据
   子组件（News.js）代码：

   export default class News extends Component {
       constructor(props) {
           super(props)
           this.state = {
               ziText: '我是子组件的值'
           }
       }
       render() {
           return (
               <div>
                   news text --- {this.props.text}
                   <button onClick={this.props.fufun.bind(this,this.state.ziText)}>点我</button>
               </div>
           )
       }
   }
   

   父组件（Home.js）代码：

   export default class Home extends Component {
     constructor(props) {
       super(props)
       this.state = {
         text: '我是默认父组件值'
       }
     }
     dataFun=(text)=> {
       this.setState({
         // text: text   ---> es6中，如果键值对都一样，可以只写一个
         text
       })
     }
     render() {
       return (
         <div>
           home ----- {this.state.text}
           <News fufun={this.dataFun}></News>
         </div>
       )
     }
   }
   

四、同级传值

同级传值需要用到pubsub.js，so，看步骤：
步骤：

1. npm i --save pubsub-js 下载依赖

2. 新建同级组件，我的为Lover.js

3. 在父组件中引入新建的子组件

4. 子组件中引入 pubsub.js
import Pubsub from 'pubsub-js'

5. 同级组件A需要使用onClick事件进行传值
   代码如下：
   News.js代码：

   export default class News extends Component {
       constructor(props) {
           super(props)
           this.state = {
               ziText: '我是News子组件的值'
           }
       }
       pubsub() {
       	// 使用publish方法，向同级组件传值
           Pubsub.publish("evt", this.state.ziText)
       }
       render() {
           return (
               <div>
               	我是News组件
                   <button onClick={this.pubsub.bind(this)}>点我同级传值</button>
               </div>
           )
       }
   }
   

   Lover.js代码：

   export default class Lover extends Component {
       constructor(props) {
           super(props)
           this.state={
               text: '我是子组件Lover的值'
           }
           // 使用subscribe方法接收传值
           Pubsub.subscribe("evt", (msg, data)=>{
               console.log("msg:" + msg + ':data' + data)
           })
       }
       render() {
           return (
               <div>
                   Lover ----- {this.state.text}
               </div>
           )
       }
   }
   

   父组件Home.js引入即可，代码：

   	<div>
           home ----- {this.state.text}
           <News fufun={this.dataFun}></News>
           <Lover></Lover>
         </div>