ReactJS中不使用state实现两个不同组件间的数据共享

你当前的代码存在两处不符合React规则的问题：

• 传递对象类型数据时不需要额外调用JSON.stringify转成字符串，直接传原始对象即可，避免后续处理时还要额外解析
• React组件的返回值必须是合法的可渲染节点（JSX、字符串、数字）、null或者undefined，你当前直接返回props.data（对象类型）会触发React渲染报错。由于你不需要该组件渲染任何页面内容，直接返回null即可。

App.js 代码 #

function App() {
  const data1 = {
    test: "Strawberry"
  }

  return (
    <>
      <div className="App">
        <h1>Hello World!</h1>
        <Apple />
        <Banana />
      </div>
      {/* 直接传递对象数据，无需序列化 */}
      <Strawberry data={data1} />
    </>
  );
}

Strawberry.js 代码 #

import { useEffect } from 'react';

export const Strawberry = (props) => {
  // 所有数据运算、逻辑处理、副作用调用都可以在组件内正常执行
  console.log('接收到的传入数据：', props.data);

  // 示例：数据处理逻辑
  const handleProcessData = () => {
    const processResult = `${props.data.test} 数据运算完成`;
    console.log('处理结果：', processResult);
    // 你需要的任意业务逻辑都可以写在这里，比如调用接口、缓存数据、触发全局事件等
  };

  // 监听传入数据变化，数据更新时自动重新执行处理逻辑
  useEffect(() => {
    handleProcessData();
  }, [props.data]);

  // 不需要渲染任何UI内容时，直接返回null即可，组件不会在页面DOM中生成任何节点
  return null;
}

• 这类只承载逻辑处理、不输出任何UI的组件通常被称为无头组件（Headless Component），很适合用来抽离埋点上报、数据监听、公共逻辑复用这类不需要页面展示的场景
• 只要组件返回null，React就不会在渲染阶段往页面插入任何DOM元素，完全不影响现有页面的结构和样式
• 如果后续需要跨多层组件共享数据，可以根据业务复杂度选择Context或者状态管理方案，当前父子组件直接传值的场景用props传递即可满足需求

内容的提问来源于stack exchange，提问作者Sneha Chintalapati