React中如何从子组件向父组件传递JSX元素？

核心思路是把状态和状态修改逻辑提升到父组件，通过props传递状态/修改函数给子组件，完全不需要把JSX元素存在state里——这是React处理兄弟组件通信的标准方案，也符合单向数据流原则。

具体实现代码 #

1. 父组件（维护状态与修改逻辑）

import { useState } from 'react';
import SiblingA from './SiblingA';
import SiblingB from './SiblingB';

function Parent() {
  // 存储需要被控制的兄弟组件状态（存原始值，而非JSX）
  const [siblingBStatus, setSiblingBStatus] = useState(false);

  // 定义状态修改函数，传给需要触发操作的子组件
  const toggleSiblingB = () => {
    setSiblingBStatus(prev => !prev);
  };

  return (
    <div>
      {/* 把修改函数传给SiblingA，让它自己渲染按钮 */}
      <SiblingA onToggle={toggleSiblingB} />
      {/* 把状态传给SiblingB，让它根据状态渲染内容 */}
      <SiblingB isActive={siblingBStatus} />
    </div>
  );
}

2. 触发组件（SiblingA，渲染按钮）

function SiblingA({ onToggle }) {
  // 这里自己渲染按钮，直接调用父组件传过来的修改函数
  return <button onClick={onToggle}>切换兄弟组件状态</button>;
}

3. 受控组件（SiblingB，响应状态变化）

function SiblingB({ isActive }) {
  return <div>{isActive ? '已激活' : '未激活'}</div>;
}

进阶：动态按钮配置 #

如果需要传递动态的按钮属性（比如文本、样式），可以传递配置对象而非现成的JSX：

// 父组件中定义按钮配置
const buttonConfig = {
  text: '切换状态',
  className: 'btn-primary',
  onClick: toggleSiblingB
};

// 传给SiblingA
<SiblingA buttonConfig={buttonConfig} />

// SiblingA中渲染按钮
function SiblingA({ buttonConfig }) {
  return <button {...buttonConfig} />;
}

为什么不存JSX到State？ #

React元素（JSX）是每次渲染都会生成的新对象，存在state里会触发不必要的重渲染，同时违背了*“状态存原始数据、UI由数据驱动”*的React设计原则。

内容的提问来源于stack exchange，提问作者Yurii Melnychuk