react组件传值

关系如图所示，画的不好请见谅：

1、父传子app.js 传值

app.js传值 import React, { Component ,Fragment} from "react"; import One from "./components/one"; import Two from "./components/two"; export default class App extends Component { constructor() { super(); this.state = { message:"App组件" } } render() { let {message} = this.state; return ( <div className="app"> <h2>APP</h2> <One val={message}/> <Two/> </div> ) }接受父组件app.js传过来的值 one.js   i mport React,{Component} from "react";   import OneOne from "./oneone";   export default class One extends Component{        render(){    let {val} = this.props;      return (    <div className="one">     <h2>one</h2>     <h3>接收到父组件的值为:{val}</h3>     <OneOne/>      </div>     )     } }

　　

2、子传父

子组件two.js传值 import React,{Component}from "react"; export default class Two extends Component{ constructor(){ super(); this.state = { inputVal:"123", childVal:"" } render(){ let {childVal} = this.state; return ( <div className="two"> <h2>Two</h2> <button onClick={this.handle.bind(this)}>点击</button> <h3>接收到onone组件的值为:{childVal}</h3> </div> ) } handle(){ this.props.handleSend(this.state.inputVal); } } 父组件j接受app.js import React, { Component ,Fragment} from "react"; import One from "./components/one"; import Two from "./components/two"; export default class App extends Component { constructor() { super(); this.state = { message:"App组件", childVal:"" } } render() { let {message,childVal} = this.state; return ( <div className="app"> <h2>APP</h2> <h3>接收到子组件的值为:{childVal}</h3> <One val={message}/> <Two handleSend={this.handleSendFn.bind(this)}/> </div> ) } handleSendFn(val){ this.setState({ childVal:val }) } }

　　

3、非父子

oneone.js 传值 import React,{Component}from "react"; import Observer from "../Observer"; export default class OneOne extends Component{ render(){ return ( <div className="oneone"> <h2>OneOne</h2> <button onClick={this.handleTwo.bind(this)}>传递给two</button> </div> ) } handleTwo(){ Observer.$emit("handleTo","oneone") } } two.js接收值 import React,{Component}from "react"; import Observer from "../Observer"; export default class Two extends Component{ constructor(){ super(); this.state = { inputVal:"123", childVal:"" } Observer.$on("handleTo",(val)=>{ console.log(val); this.setState({ childVal : val }) }) } render(){ let {childVal} = this.state; return ( <div className="two"> <h2>Two</h2> <button onClick={this.handle.bind(this)}>点击</button> <h3>接收到onone组件的值为:{childVal}</h3> </div> ) } handle(){ this.props.handleSend(this.state.inputVal); } }

总结一下：

 组件通信(传值)      父传子        传递：当子组件在父组件中当做标签使用的时候，给当前子组件绑定一个自定义属性，值为需要传递的数据        接收：在子组件内部通过this.props进行接收      子传父        接收：当子组件在父组件中当做标签使用的时候，给当前子组件绑定一个自定义属性 值为一个函数        接收的时候通过这个函数的参数进行接收        传递：在子组件内部通过调用this.props身上传递过来的的方法 将值传递过去     非父子       通过事件订阅的方法来实现，但是这种方法必须有组件的存在

转载于:https://www.cnblogs.com/ray123/p/10915249.html

相关资源：React传值 组件传值 之间的关系详解