React组件间传值有哪些具体的三种方式？

本文共计711个文字，预计阅读时间需要3分钟。

在React中，组件间传递数据有三种主要方式：

1. 父组件向子组件传递数据（通过props传递）：jsx// 子组件class Child extends Component { constructor(props) { super(props); }

render() { return ( {this.props.name} // 这是父组件向子组件传递数据 ); }}

2. 子组件向父组件传递数据（通过回调函数）：jsx// 父组件class Parent extends Component { constructor(props) { super(props); this.state={ childData: '' }; }

handleChildData=(data)=> { this.setState({ childData: data }); }

render() { return (

从子组件接收的数据: {this.state.childData}

); }}

3. 使用Context进行跨组件传递数据：jsximport React, { createContext, useContext } from 'react';

// 创建一个Contextconst MyContext=createContext();

// 父组件const Parent=()=> { const value={ name: 'React' }; return ( );};

// 子组件const Child=()=> { const { name }=useContext(MyContext); return ( {name} );};

整理 react 组件传值 三种方式

父组件向子组件传值（通过props传值）

子组件：

class Children extends Component{ constructor(props){ super(props); } render(){ return( <div>这是：{this.props.name}</div> // 这是 父向子 ) } }

父组件:

class App extends React.Component{ render(){ return( <div> <Children name="父向子"/> </div> ) } }

父组件向子组件传值（回调函数）

子组件

class Children extends Component{ constructor(props){ super(props); } handerClick(){ this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样 } render(){ return( <div> <div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor <button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数 </div> ) } }

父组件

class Father extends Component{ constructor(props){ super(props) this.state = { bgcolor:'pink' } } bgChange(color){ this.setState({ bgcolor:color }) } render(props){ <div style={{background:this.state.bgcolor}}> // 给子组件传递的值 color <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> // changeColor 子组件的参数=color 当做形参 </div> } }

兄弟组件传值（子传给父，父再传给另一个子）

子组件1

class Children1 extends Component{ constructor(props){ super(props); } handerClick(){ this.props.changeChild2Color('skyblue') // 改变兄弟组件的颜色 把changeChild2Color的参数传给父 } render(){ return( <div> <div>children1</div> <button onClick={(e)=>{this.handerClick(e)}}>改变children2背景</button> </div> ) } }

子组件2

class Children2 extends Component{ constructor(props){ super(props); } render(){ return( <div style={{background:this.props.bgcolor}}> // 从父元素获取自己的背景色 <div>children2 背景色 {this.props.bgcolor}</div> // children2 背景色 skyblue </div> ) } }

父组件

class Father extends Component{ constructor(props){ super(props) this.state = { child2bgcolor:'pink' } } onchild2bgChange(color){ this.setState({ child2bgcolor:color }) } render(props){ <div> <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} /> <Children2 bgcolor={this.state.child2bgcolor} /> </div> } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。