如何使用React Hooks实现组件间传值计数结果跨组件展示问题

架构老林

2026-10-5

问题根源

你当前的问题出在React的状态作用域限制：count 是定义在Count组件内部的私有状态，只能在Count组件内部访问，Result组件没有权限直接读取这个变量，因此运行报错。

解决方案（优先选择：状态提升）

状态提升是React中处理跨组件共享状态的最基础方案，适合组件层级较近的场景。你需要把共享状态count提升到Count和Result的共同父组件中维护，再通过props分别把修改状态的方法传给Count组件、把状态值传给Result组件即可。

1. 修改Count组件，接收父组件传入的回调方法

import React from 'react';

function Count({ onIncrement }) {
  return (
    <div>
      <button onClick={onIncrement}>
        Click me
      </button>
    </div>
  );
}
export default Count;

2. 修改Result组件，接收父组件传入的count值

import React from 'react';

function Result({ count }) {
  return <p>You clicked {count} times</p>;
}
export default Result;

3. 共同父组件示例（以App组件为例）

import React, { useState } from 'react';
import Count from './Count';
import Result from './Result';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Count onIncrement={() => setCount(count + 1)} />
      <Result count={count} />
    </div>
  );
}
export default App;