React中如何跨组件修改变量？按钮修改计数器值实现方案

要实现点击Button修改Counter的数值，核心是把状态提升到共同的父组件App中——因为React是单向数据流，子组件无法直接修改另一个子组件的内部状态。具体实现步骤如下：

1. 重构App组件，将状态统一管理 #

把Counter组件内的number状态移到App组件中，同时定义更新数值的逻辑，通过props传递给子组件：

import logo from './logo.svg';
import './App.css';
import { Button } from './components/button';
import { Counter } from './components/counter';
import { useState } from 'react';

function App() {
  // 将计数器状态提升到父组件
  const [number, setNumber] = useState(0);

  // 定义数值增加的逻辑
  const addNumber = () => {
    setNumber(prevNumber => prevNumber + 1);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* 向Button组件传递点击回调 */}
        <Button addNumber={addNumber} />
        {/* 向Counter组件传递当前数值 */}
        <Counter number={number} />
      </header>
    </div>
  );
}

export default App;

2. 修改Button组件，触发回调函数 #

在Button的onClick事件中，直接调用父组件传入的addNumber函数即可：

import React from 'react'

export const Button = ({ addNumber }) => {
  return (
    <button className="btn btn-danger" onClick={addNumber}>
      Click me
    </button>
  )
}

3. 修改Counter组件，接收并渲染外部数值 #

去掉Counter自身的state，改为接收父组件传递的number props并渲染：

import React from 'react'

export const Counter = ({ number }) => {
  return (
    <div id="counter">{number}</div>
  )
}

核心逻辑说明 #

• 状态提升是React处理跨组件状态共享的标准方案：将共享状态放到最近的共同父组件中，通过props分发状态和修改逻辑，保证数据流的单向性。
• 拆分后Button只负责触发交互，Counter只负责展示数值，组件职责更单一，也更易维护。

内容的提问来源于stack exchange，提问作者Gaspar Giménez