备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【第34期】一文学会React组件传值

2024-01-08 31
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【第34期】一文学会React组件传值

概述

在React中，组件之间的传值是单向的，即父组件可以向子组件传递数据，但子组件不能直接修改父组件的数据。如果需要修改父组件的数据，可以通过在父组件中定义回调函数，并将该函数作为props传递给子组件，在子组件中调用回调函数来修改父组件的数据。今天小编带大家一起了解React组件传值的方式。

组件传值方式

在 React 中，有多种传递值给组件的方式。这些是所有常见的传递值给组件的方式。您可以根据具体的场景和需求选择适合的方式来传递和管理组件之间的值。以下是 React 中所有常见的传递值方式：

  • Props（属性）：使用 Props 将值从父组件传递给子组件。在父组件中通过属性的方式将值传递给子组件，子组件可以通过 props 对象访问这些值。

下面是一个使用React Props传值的案例：

父组件：

import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }
  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
      </div>
    );
  }
}
export default ParentComponent;

子组件：

import React from 'react';
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
      </div>
    );
  }
}
export default ChildComponent;

在这个例子中，父组件ParentComponent通过message属性将值Hello, World!传递给了子组件ChildComponent。子组件通过this.props.message获取到传递的值，并将其显示在页面上。使用Props传值可以在组件之间传递数据，实现组件之间的通信。在父组件中定义Props，并将其作为属性传递给子组件，在子组件中通过this.props获取传递的值。这样可以实现父子组件之间的数据传递和共享。

  • State（状态）：使用 State 在组件内部管理和传递值。组件可以使用 state 对象来存储和更新值，并在需要时将其传递给子组件。

下面是一个使用React State传值的案例：

import React from 'react';
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }
  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
      </div>
    );
  }
}
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: this.props.message
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ message: 'Hello, React!' });
    }, 2000);
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}
export default ParentComponent;

在这个例子中，父组件ParentComponent通过state中的message属性将值Hello, World!传递给了子组件ChildComponent。子组件通过state中的message属性获取到传递的值，并将其显示在页面上。子组件在componentDidMount生命周期方法中设置了一个定时器，在2秒后更新state中的message属性为Hello, React!。这样子组件会重新渲染，并显示更新后的值。使用State传值可以在组件内部传递和管理数据。在父组件中通过state定义数据，并将其作为属性传递给子组件。子组件可以通过state获取传递的值，并根据需要更新state来改变显示的值。这样可以实现组件内部的数据传递和状态管理。

  • Context（上下文）：使用 Context 在组件树中传递值，而不需要显式地通过 Props 传递。Context 允许您在组件树中共享值，子组件可以通过 contextType 或 useContext 来访问这些值。

下面是一个使用React Context传值的案例：

import React from 'react';
// 创建一个Context
const MyContext = React.createContext();
// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }
  render() {
    return (
      <div>
        {/* 将value设置为父组件中的message属性 */}
        <MyContext.Provider value={this.state.message}>
          <ChildComponent />
        </MyContext.Provider>
      </div>
    );
  }
}
// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 使用Consumer来获取Context中的值 */}
        <MyContext.Consumer>
          {message => <h1>{message}</h1>}
        </MyContext.Consumer>
      </div>
    );
  }
}
export default ParentComponent;

在这个例子中，我们首先使用React.createContext()创建了一个Context对象MyContext。然后，在父组件ParentComponent中，我们通过Context.Provider>组件将this.state.message作为value属性传递给了子组件ChildComponent。在子组件中，我们使用Context.Consumer>组件来获取Context中的值，并将其显示在页面上。使用Context传值可以在组件树中的任意层级传递数据，而不需要通过props一层层传递。通过创建Context对象，我们可以在父组件中将数据放入Context中，然后在子组件中使用Context.Consumer>来获取这些数据。这样可以方便地实现组件之间的数据传递和共享。

  • Redux（状态管理库）：使用 Redux 管理应用程序的状态，并在组件之间共享和传递值。Redux 提供了一个全局的状态存储，组件可以通过 connect 或 useSelector 来访问存储的值。

下面是一个使用React Redux传值的案例：

  1. 首先，我们需要安装redux和react-redux依赖：
npm install redux react-redux
  1. 然后，我们创建一个Redux store和相应的action和reducer：
// actions.js
export const setMessage = (message) => ({
  type: 'SET_MESSAGE',
  payload: message
});
// reducer.js
const initialState = {
  message: 'Hello, World!'
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return {
        ...state,
        message: action.payload
      };
    default:
      return state;
  }
};
export default reducer;
// store.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
  1. 接下来，我们创建父组件和子组件，并使用react-redux提供的Provider和connect来连接Redux：
import React from 'react';
import { connect } from 'react-redux';
import { setMessage } from './actions';
// 父组件
class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent />
      </div>
    );
  }
}
// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
        <button onClick={() => this.props.setMessage('Hello, React!')}>Change Message</button>
      </div>
    );
  }
}
// 使用connect连接子组件和Redux
const mapStateToProps = (state) => ({
  message: state.message
});
const mapDispatchToProps = {
  setMessage
};
ChildComponent = connect(mapStateToProps, mapDispatchToProps)(ChildComponent);
export default ParentComponent;

在这个例子中，我们首先在父组件中引入子组件ChildComponent。子组件通过this.props.message获取Redux store中的message值，并将其显示在页面上。同时，子组件中的按钮点击事件会触发this.props.setMessage('Hello, React!')来更新Redux store中的message值。然后，我们使用connect函数将子组件与Redux连接起来。mapStateToProps函数将Redux store中的message值映射到子组件的props中，mapDispatchToProps将setMessage action映射到子组件的props中。最后，我们将连接后的子组件ChildComponent导出，并在父组件中使用。使用React Redux可以方便地在组件中访问和更新Redux store中的数据。通过使用connect函数，我们可以将Redux store中的数据映射到组件的props中，并将相应的actions映射到props中的方法中。这样可以实现组件与Redux store之间的数据传递和状态管理。

  • Hooks（钩子函数）：使用 React Hooks 中的 useState、useEffect 等钩子函数来管理和传递值。Hooks 提供了一种在函数组件中使用状态和其他 React 功能的方式。

下面是一个使用React Hooks传值的案例：

import React, { useState } from 'react';
const ParentComponent = () => {
  const [message, setMessage] = useState('Hello, World!');
  return (
    <div>
      <ChildComponent message={message} setMessage={setMessage} />
    </div>
  );
};
const ChildComponent = ({ message, setMessage }) => {
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Hello, React!')}>Change Message</button>
    </div>
  );
};
export default ParentComponent;

在这个例子中，我们使用了React Hooks中的useState来创建了一个message状态和一个setMessage函数来更新该状态。在父组件ParentComponent中，我们使用useState来初始化message状态为Hello, World!。然后，我们将message状态和setMessage函数作为属性传递给子组件ChildComponent。在子组件ChildComponent中，我们通过解构赋值的方式获取父组件传递的message和setMessage属性，并将message值显示在页面上。当点击按钮时，调用setMessage函数来更新message状态为Hello, React!。使用React Hooks可以在函数组件中使用状态和其他React特性，而不需要使用类组件。通过使用useState来定义状态，并使用解构赋值的方式将状态和更新函数传递给子组件，可以实现组件之间的数据传递和状态管理。

  • 组件方法回调：通过将方法作为属性传递给子组件，在子组件中调用该方法来传递值。这种方式可以实现父组件和子组件之间的双向通信。

下面是一个使用React组件方法回调传值的案例：

import React from 'react';
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, World!'
    };
  }
  handleChildClick = (newMessage) => {
    this.setState({ message: newMessage });
  }
  render() {
    return (
      <div>
        <ChildComponent onClick={this.handleChildClick} />
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}
class ChildComponent extends React.Component {
  handleClick = () => {
    this.props.onClick('Hello, React!');
  }
  render() {
    return (
      <button onClick={this.handleClick}>Change Message</button>
    );
  }
}
export default ParentComponent;

在这个例子中，父组件ParentComponent定义了一个名为handleChildClick的方法，该方法接收一个newMessage参数，并在触发子组件点击事件时更新message状态。通过将该方法作为onClick属性传递给子组件ChildComponent。子组件ChildComponent中的按钮点击事件触发handleClick方法，该方法调用了父组件传递的onClick方法，并将新的消息'Hello, React!'作为参数传递给父组件。这样，当点击子组件中的按钮时，会调用父组件中的方法来更新状态，从而改变显示的消息。使用组件方法回调传值可以在父组件中定义方法，并将其作为属性传递给子组件。子组件可以在需要的时候调用该方法，并传递需要的值。这样可以实现组件之间的数据传递和状态管理。

  • 组件间共享的全局变量：在组件之外定义一个全局变量，多个组件可以直接访问和修改该变量。这种方式适用于需要在多个组件之间共享状态的情况。

在React中，可以使用Context API来实现组件间共享的全局变量传值。下面是一个使用Context API传值的案例：

import React, { createContext, useContext, useState } from 'react';
// 创建一个Context
const GlobalContext = createContext();
// 父组件
const ParentComponent = () => {
  const [message, setMessage] = useState('Hello, World!');
  return (
    <GlobalContext.Provider value={{ message, setMessage }}>
      <ChildComponent />
    </GlobalContext.Provider>
  );
};
// 子组件
const ChildComponent = () => {
  const { message, setMessage } = useContext(GlobalContext);
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Hello, React!')}>Change Message</button>
    </div>
  );
};
export default ParentComponent;

在这个例子中，我们首先使用createContext函数创建了一个全局Context对象GlobalContext。在父组件ParentComponent中，我们使用useState来创建了一个message状态和一个setMessage函数来更新该状态。然后，通过组件将message状态和setMessage函数作为value属性传递给子组件ChildComponent。在子组件ChildComponent中，我们使用useContext钩子函数来获取GlobalContext中的message和setMessage。然后，我们将message值显示在页面上，并在点击按钮时调用setMessage函数来更新message状态为Hello, React!。通过使用Context API，我们可以在父组件中将数据放入Context中，然后在子组件中使用useContext来获取这些数据。这样可以实现组件之间的数据传递和共享，达到全局变量的效果。

文章标签：
前端开发
JavaScript
API
存储
关键词：
React Native传值
react.js组件
react.js组件传值
答神~
目录
相关文章
恬0917
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库，嵌套路由
React 的antd-mobile 组件库，嵌套路由
恬0917
40 0
yma16
|
2天前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件（二）
vue3、react组件数据传值对比分析——父组件传递子组件，子组件传递父组件
yma16
11 0
无妄的罪
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
无妄的罪
17 1
快乐阿超
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
快乐阿超
21 0
雪碧有白泡泡
|
2月前
|
前端开发 JavaScript
快速上手React：从概述到组件与事件处理
快速上手React：从概述到组件与事件处理
雪碧有白泡泡
56 0
恬0917
|
3月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
恬0917
74 1
恬0917
|
3月前
|
资源调度 前端开发 JavaScript
React组件
React组件
恬0917
41 0
阿珊和她的猫
|
3月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界：如何构建出色的组件(下)
探索 React Hooks 的世界：如何构建出色的组件(下)
阿珊和她的猫
34 0
探索 React Hooks 的世界：如何构建出色的组件(下)
阿珊和她的猫
|
3月前
|
缓存 前端开发 API
探索 React Hooks 的世界：如何构建出色的组件(上)
探索 React Hooks 的世界：如何构建出色的组件(上)
阿珊和她的猫
38 0
探索 React Hooks 的世界：如何构建出色的组件(上)
&amp;ACE&amp;
|
3月前
|
存储 前端开发 JavaScript
React组件中如何通讯
React组件中如何通讯
&amp;ACE&amp;
16 0