React学习:05 React组件之间如何传递数据

React组件之间如何传递数据

使用react组件的时候我们经常会把一些常用的组件组合到一起,定义成一个新的组件,一般前端页面会有一个父组件,这个组件中定义了当前页面中所需的变量,如何把这些变量传递给子组件呢?

react的设计哲学表明:

React 中的数据流是单向的，并顺着组件层级从上往下传递。

也就是说当你设计好页面的功能和组件的布局是,就要考虑好state应该安放在哪里,一般这个state都会放到顶端父组件中(当然也会有其他的方式),确定props和state的位置是数据传递的关键.

一个简单的例子,搭建好react和Material-UI的运行环境,如果不知道如何快速的创建请参看这篇:React学习: 01 创建React应用和安装Material-UI

创建一个comconents目录,目录下边创建三个文件:Login.js AppBtn.js AppTextField.js

Login.js是一个测试用的组件,包括了两个组件,一个文本框,一个按钮,在这个文件里我们还定了按钮的事件和一个组件的valuetest,用来传递数据,按钮事件用来改变valuetest的值,这样就可在页面的渲染中看到实际效果了.

import { useState } from 'react';
import * as React from 'react';

import Atf from './AppTextField';
import AppBtn from './AppBtn';

export default function Login() {

    const [valuetest, setValuetest] = useState("这里是来自父组件的数据")


    const handleSubmit = (event) => {
        setValuetest('这是父组件定义的方法修改了text的value!')
    }
    return (
        <div>
            <Atf valuetest={valuetest}/>
            <AppBtn handleSubmit={handleSubmit} />
            <p>{valuetest}</p>
        </div>
    );
}

AppBtn.js定义了一个按钮组件,props.handleSubmit就是用来接收父组件Login.js定义的按钮事件方法.

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

export default function AppBtn(props){
    return (
        <Box>
            <Button variant="contained" onClick={props.handleSubmit}>Submit</Button>
            {props.info}
        </Box>
    )
}

AppTextField.js中的props.valuetest是用来接收父组件Login.js中的valuetest,这样就可以通过父组件来控制这二个组件了.

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';

export default function Atf(props){
    return(
        <Box
                component="form"
                sx={{
                    '& > :not(style)': { m: 1, width: '25ch' },
                }}
                noValidate
                autoComplete="off"
            >
                <TextField id="outlined-basic" label='props' variant="outlined" 
                value={props.valuetest} />

            </Box>
    )
}

最后我们修改app.js中的代码,引入Login组件.

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';


export default function AppBtn(props){
    return (
        <Box>
            <Button variant="contained" onClick={props.handleSubmit}>Submit</Button>
            {props.info}
        </Box>
    )
}

测试一下效果,终端:npm start,看到如下:

当我们点击按钮是,页面组件就会根据逻辑再次渲染:

至此,React组件之间如何传递数据,聪明的你一定了解了大概了.react数据流是定义成从上到下传递的,也就是父组件定义要是用的数据和方法,传递给子组件展示渲染,子组件的控制事件,依然在父组件中,说白了就是数据都在父组件那里控制,变量和方法,只是借给子组件而已.