React中如何将子组件的percentChange常量传递给另一子组件？

你提到的需求可以实现，但React中子组件无法直接互相传递数据，必须通过共同父组件中转或状态管理工具来完成，下面是两种最常用的实现方式：

方案1：通过共同父组件中转（基础场景首选） #

这是最直观的实现方式，核心是让父组件作为数据的中转站：

1. 在父组件中定义存储计算值的状态和对应的更新函数
2. 将更新函数传给PercentChange组件，把计算出的percentChange同步到父组件
3. 父组件再把这个值作为props传给Search组件

示例代码 #

父组件（如ParentComponent.js）

import React, { useState } from "react";
import PercentChange from "./PercentChange";
import Search from "./Search";

const ParentComponent = () => {
  // 存储百分比变化值的状态
  const [percentChangeValue, setPercentChangeValue] = useState(null);

  return (
    <div>
      {/* 把更新函数传给PercentChange组件 */}
      <PercentChange updatePercentChange={setPercentChangeValue} />
      {/* 把计算值传给Search组件 */}
      <Search currentPercentChange={percentChangeValue} />
    </div>
  );
};

export default ParentComponent;

修改后的PercentChange.js

//(Ending price - starting price)/(Starting price) = %change.
import React, { useState, useEffect } from "react";
import axios from "axios";

const PercentChange = ({ updatePercentChange }) => {
  const [startPrice, setStartPrice] = useState([]);
  const [endPrice, setEndPrice] = useState([]);

  // 补充获取价格数据的逻辑（示例用axios请求）
  useEffect(() => {
    axios.get('/api/price-data')
      .then(res => {
        setStartPrice(res.data.startPrices);
        setEndPrice(res.data.endPrices);
      })
      .catch(err => console.error('获取价格失败：', err));
  }, []);

  // 计算百分比变化，同时处理除数为0的异常情况
  const percentChange = startPrice[0] ? 
    (((endPrice[0] - startPrice[0]) / startPrice[0]) * 100).toFixed(2) : 
    '0.00';

  // 当价格数据更新时，把计算值同步到父组件
  useEffect(() => {
    if (startPrice.length && endPrice.length) {
      updatePercentChange(percentChange);
    }
  }, [startPrice, endPrice, updatePercentChange]);

  // 修正原代码错误：percentChange是数值/字符串，不是函数，直接渲染即可
  return (
    <div>
      <h2 style={{ color: percentChange < 0 ? "red" : "green" }}>
        {percentChange}%
      </h2>
    </div>
  );
};

export default PercentChange;

Search.js接收并使用值

import React from "react";

const Search = ({ currentPercentChange }) => {
  return (
    <div>
      <p>当前涨跌幅度：{currentPercentChange || '0.00'}%</p>
      {/* 这里可以基于currentPercentChange做搜索相关逻辑 */}
    </div>
  );
};

export default Search;

方案2：使用Context API（跨多层组件场景） #

如果两个子组件层级较深，父组件中转太繁琐，可以用React内置的Context API实现全局数据共享：

1. 创建Context文件，定义状态和更新函数
2. 在根组件或父组件中用Provider包裹所有需要共享数据的组件
3. 在PercentChange和Search组件中用钩子获取数据或更新函数

示例代码 #

创建Context文件（PercentChangeContext.js）

import React, { createContext, useState, useContext } from "react";

// 创建Context
const PercentChangeContext = createContext();

// 定义Provider组件，提供共享状态和更新方法
export const PercentChangeProvider = ({ children }) => {
  const [percentChange, setPercentChange] = useState(null);
  return (
    <PercentChangeContext.Provider value={{ percentChange, setPercentChange }}>
      {children}
    </PercentChangeContext.Provider>
  );
};

// 自定义钩子，简化Context的调用
export const usePercentChange = () => useContext(PercentChangeContext);

在根组件中包裹Provider

import { PercentChangeProvider } from "./PercentChangeContext";
import PercentChange from "./PercentChange";
import Search from "./Search";

function App() {
  return (
    <PercentChangeProvider>
      <PercentChange />
      <Search />
    </PercentChangeProvider>
  );
}

export default App;

修改PercentChange.js使用Context

//(Ending price - starting price)/(Starting price) = %change.
import React, { useState, useEffect } from "react";
import axios from "axios";
import { usePercentChange } from "./PercentChangeContext";

const PercentChange = () => {
  const [startPrice, setStartPrice] = useState([]);
  const [endPrice, setEndPrice] = useState([]);
  // 从Context获取更新函数
  const { setPercentChange } = usePercentChange();

  useEffect(() => {
    axios.get('/api/price-data')
      .then(res => {
        setStartPrice(res.data.startPrices);
        setEndPrice(res.data.endPrices);
      })
      .catch(err => console.error('获取价格失败：', err));
  }, []);

  const percentChange = startPrice[0] ? 
    (((endPrice[0] - startPrice[0]) / startPrice[0]) * 100).toFixed(2) : 
    '0.00';

  useEffect(() => {
    if (startPrice.length && endPrice.length) {
      setPercentChange(percentChange);
    }
  }, [startPrice, endPrice, setPercentChange]);

  return (
    <div>
      <h2 style={{ color: percentChange < 0 ? "red" : "green" }}>
        {percentChange}%
      </h2>
    </div>
  );
};

export default PercentChange;

Search.js通过Context获取值

import React from "react";
import { usePercentChange } from "./PercentChangeContext";

const Search = () => {
  // 从Context获取计算值
  const { percentChange } = usePercentChange();
  return (
    <div>
      <p>当前涨跌幅度：{percentChange || '0.00'}%</p>
    </div>
  );
};

export default Search;

内容的提问来源于stack exchange，提问作者Kazi Arifin Islam