React组件中如何根据渲染场景动态切换Card的h2标题？

这种方式适合组件层级不多的场景，核心是上层组件向下层传递标题props，每层组件负责接收并传递给子组件。

1. 改造Card组件 #

让Card完全受控于外部传入的title props，不要自行维护状态：

// Card.jsx
export default function Card({ title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {/* 其他Card内容 */}
    </div>
  );
}

2. 改造ItemForm组件 #

ItemForm接收外部传入的cardTitle props（可设置默认值），再将其传递给Card：

// ItemForm.jsx
import Card from './Card';

export default function ItemForm({ cardTitle = "默认表单标题" }) {
  return (
    <div className="item-form">
      <Card title={cardTitle} />
      {/* 其他表单内容 */}
    </div>
  );
}

3. 不同场景的调用方式 #

• 单独渲染ItemForm时：直接传入对应标题

// 示例页面中单独使用ItemForm
import ItemForm from './ItemForm';

function SomePage() {
  return <ItemForm cardTitle="新建项目表单" />;
}

• 在ItemDetails中渲染ItemForm时：传入另一个标题

// ItemDetails.jsx
import ItemForm from './ItemForm';

export default function ItemDetails() {
  return (
    <div className="item-details">
      {/* 其他详情内容 */}
      <ItemForm cardTitle="编辑项目表单" />
    </div>
  );
}

这样不管ItemForm在哪渲染，只要上层传入不同的cardTitle，Card的标题就会同步变化，完全受控，不会出现状态不一致问题。

如果组件层级较深，逐层传props过于繁琐，可以用Context统一管理标题状态：

1. 创建Context #

// CardTitleContext.jsx
import { createContext, useContext } from 'react';

const CardTitleContext = createContext("默认标题");

export function CardTitleProvider({ children, title }) {
  return (
    <CardTitleContext.Provider value={title}>
      {children}
    </CardTitleContext.Provider>
  );
}

export function useCardTitle() {
  return useContext(CardTitleContext);
}

2. 改造Card组件 #

通过自定义hook获取Context中的标题：

// Card.jsx
import { useCardTitle } from './CardTitleContext';

export default function Card() {
  const title = useCardTitle();
  return (
    <div className="card">
      <h2>{title}</h2>
      {/* 其他Card内容 */}
    </div>
  );
}

3. 不同场景的调用 #

• 单独渲染ItemForm时：用Provider包裹并传入标题

import ItemForm from './ItemForm';
import { CardTitleProvider } from './CardTitleContext';

function SomePage() {
  return (
    <CardTitleProvider title="新建项目表单">
      <ItemForm />
    </CardTitleProvider>
  );
}

• 在ItemDetails中渲染ItemForm时：用Provider传入另一个标题

// ItemDetails.jsx
import ItemForm from './ItemForm';
import { CardTitleProvider } from './CardTitleContext';

export default function ItemDetails() {
  return (
    <div className="item-details">
      {/* 其他详情内容 */}
      <CardTitleProvider title="编辑项目表单">
        <ItemForm />
      </CardTitleProvider>
    </div>
  );
}

• Props传递失败：大概率是多层传递时中间组件未将props向下传递，比如ItemForm没有接收上层标题并传给Card，而是硬编码了标题。
• Switch/useState+useEffect失败：React组件无法直接感知上层渲染上下文，必须通过外部传入的信息（props/Context）判断场景，自行判断容易出现逻辑偏差。

内容的提问来源于stack exchange，提问作者Julian Jernigan