React 组件间传值

最新推荐文章于 2024-06-07 22:09:22 发布

原创最新推荐文章于 2024-06-07 22:09:22 发布

· 291 阅读

2 ·

版权

文章标签：

#react #js #html

React 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了React组件间如何传递数据，包括使用props进行父子、兄弟组件间的通信，详细阐述了props和state属性的用法，提供了实例代码展示数据传递过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 组件间传值

一、React创建组件的方法

创建组件的方法

组件包括：函数组件和类组件

函数组件

function fn(props){
    return <h1>Hello,{props.name}</h1>;
}

类组件

//引入react模块
import React from 'react';
//声明子组件son
class R extends React.Component {//重写方法render
    render() {
        return (
            // 模板字串
            <React.Fragment>
                {/* jsx */}
　　　　　　　　　　<h1>hello,{props.name}</h1>　
            </React.Fragment>
        );
    }
}

二、props属性和state属性

1 props属性及用法

1、proprs属性是组件之间用来传递参数的，但是props的数据是不可以修改的。并且function中没有构造器，所以只有porps属性传递数据。
2、用法
{this.props.name}

1 state属性及用法

1、 state属性，class声明的组件中有constructor构造函数，可以声明state属性，state属性是class私有的属性，所以值是可以修改的。
2、用法
{this.state.[name]}
修改
{this.setState({ name:值 })}

二、React 传值

首先，我们的HTML代码如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Web site created using create-react-app" />
  <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

1、父子传值

1.1 、父组件 --> 子组件是通过props这个属性来传值的

父组件的代码

 //引入React组件
import React from 'react';
//引入React-dom组件
import ReactDOM from 'react-dom';
//引入子组件Son
import Son from './Son';
 
//声明一个父组件名为Father
class Father extends React.Component{
    //类自带的构造函数constructor
    constructor(){
        //继承React
        super();
        //声明一个类函数专属的状态state
        this.state={
            message:"hello,This is my son's data。。。"
        }
    }
    //渲染方法，类组件中必须有的渲染方法。
    render(){
        //渲染方法中必须有的return 返回值，并且返回值最外层必须是只有一个标签。
        return (
            //如果页面中不希望有无用的标签，可以用React中自带的<React.Fragment>标签
            <React.Fragment>
                {/*实例化Son组件并向Son组件传递数据，渲染到页面*/}
                <Son mess={this.state.message} />
            </React.Fragment>
        );
    }
}
 
//获取目标元素，并渲染
ReactDOM.render(<Father />,document.querySelector("#root"))

子组件代码，接受父组件的数据，并向父组件返回渲染数据

//引入React
import React from 'react';
 
//声明一个子组件，名为Son
class Son extends React.Component{
    //声明render方法
    render(){
        //return返回
        return(
            <React.Fragment>
                <h1>这是Son组件</h1>
                {/* 调用组件之间传参props 渲染数据到页面 */}
                {this.props.mess}
            </React.Fragment>
        );
    }
}
 
//向外暴露自己
export default Son;

页面上就可以得到 "hello world！"这个值

1.2 、子组件向父组件传值
声明一个父组件

//引入React组件
import React from 'react';
//引入React-dom组件
import ReactDOM from 'react-dom';
//引入子组件Son
import Son from './Son';
 
//声明一个父组件名为Father
class Father extends React.Component{
    //声明一个类中自带的构造函数
    constructor(){
        //继承react
        super();
        //声明一个state状态
        this.state={
            message:""
        }
    }
    //声明一个用来接收子组件数据的方法
    getSonMess(msg){
        this.setState({
            message:msg
        })
    }
    //渲染方法
   render(){
    return(
        <React.Fragment>
　　　　<h1>这是Father组件</h1>
            {/* 实例化子组件 */}
            <Son mess={this.getSonMess.bind(this)} />
            <hr />
            <h1>这是从Son组件中获取的数据</h1>
            {this.state.message}
        </React.Fragment>
    );
   }
}
 
//获取目标元素，并渲染
ReactDOM.render(<Father />,document.querySelector("#root"))

声明一个子组件

import React from 'react';
 
class Son extends React.Component{
    //创建构造函数
    constructor(){
        super();
        //创建数据
        this.state={
            message:"这是在Son子组件生成的数据。。"
        }
    }
    //创建一个方法用来向父组件传数据
    addFatherMess(){
        this.props.mess(this.state.message)
    }
 
    render(){
        retrun(
            <React.Fragment><br>　　　　　　　　　　<h1>这是Son组件</h1>
                {/* 绑定一个点击事件，向父组件传数据 */}
                <button onClick={this.addFatherMess.bind(this)}>点击获取数据</button>
            </React.Fragment>
        );
    }
}
 
//向外暴露
export default Son;

1、兄弟传值

声明一个Father组件，用来接收Son组件的数据，然后发送到Son2组件，并向页面进行渲染

//引入react
import React from 'react';
//引入react-dom组件
import ReactDOM from 'react-dom';
//引入 Son 组件
import Son from './Son';
//引入 Son2 组件
import Son2 from './Son2';
//创建一个Father组件
class Father extends React.Component{
    //创建构造函数
    constructor(){
        //继承React
        super();
        //创建state状态
        this.state={
            message:""
        }
    }
  //通过getSonMess方法获取子组件参数，并修改this.state.message数据
   getSonMess(msg){
        this.setState({
            message:msg
        })
   }
 
//声明render方法
   render(){
//render方法中必须有一个返回值，是渲染页面的排版，
       return (
            <React.Fragment>
                <h1>这是Father.js</h1>
                <hr />
                 {/* 实例化Son组件，从Son组件获取数据和渲染页面 */}
                <Son mess={this.getSonMess.bind(this)}></Son>
                <hr />
                 {/* 实例化Son2组件，向Son2组件传递数据和渲染页面 */}
                <Son2 data={this.state.message}></Son2>
                 
            </React.Fragment>
       );
   }
}
//获取目标元素,并渲染页面
ReactDOM.render(<Father />,document.querySelector(#root))

声明一个Son组件，用来生成数据，然后把数据传递给父组件

//引入react组件
import React from 'react';
 
//声明一个Son组件，用来向父组件传值
class Son extends React.Component{
    //点击事件绑定的函数
    sonClick(){
         //生成数据，并赋值给参数
        this.props.mess("Son里生成的数据")
    }
 
   render(){
       return (
           <div>
               <h1>这是Son.js</h1>
               <button onClick={this.sonClick.bind(this)}>Son里的按钮点击获取数据传到Son2.js</button>
                {/* 通过点击事件绑定，把数据传给父组件 */}
           </div>
       );
   }
}

//向外暴露自己
export default Son;

声明一个Son2组件，用来接收Father组件传过来

//引入react
import React from 'react';
 
//声明一个Son2组件用来接收Father组件接收Son组件的数据
class Son2 extends React.Component{
     
   render(){
       return (
           <div>
              {/* 获取数据并渲染通过props */}
               <h1>这是Son2.js</h1>
               拿到{this.props.data}
           </div>
       );
   }
}

//向外暴露自己
export default Son2;