如何创建共享同一逻辑的React模态框子组件？

针对你的场景，完全没必要用React Context——因为只是Modal内部的Header和Body组件需要共享搜索状态，以下几种更简洁轻量的方案更适配：

1. 状态提升到BaseModal的调用父组件 #

这是最直接的思路，把搜索状态（比如searchValue和更新方法）放在使用BaseModal的父组件里，再把状态传递给Header和Body即可：

// 调用BaseModal的父组件
function SearchModal() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <BaseModal
      header={<SearchHeader value={searchValue} onChange={setSearchValue} />}
      body={<SearchResults searchValue={searchValue} />}
      footer={<ModalFooter />}
    />
  );
}

// 搜索头部组件
function SearchHeader({ value, onChange }) {
  return (
    <div className="modal-header">
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="搜索..."
      />
    </div>
  );
}

// 搜索结果内容组件
function SearchResults({ searchValue }) {
  // 根据搜索值过滤数据，用useMemo避免不必要的重渲染
  const filteredData = useMemo(() => {
    return yourDataSource.filter(item => item.name.includes(searchValue));
  }, [searchValue]);

  return (
    <div className="modal-body">
      {filteredData.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}

这种方式逻辑直白，完全不需要额外的状态管理方案，是React中最常用的状态提升原则的典型应用，适合这种组件层级浅的场景。

2. 用Render Props模式封装BaseModal内部状态 #

如果想把搜索逻辑封装在BaseModal内部，不让父组件操心状态管理，可以用Render Props模式：让BaseModal自己维护搜索状态，然后把状态和更新方法通过回调传递给Header和Body的渲染函数：

// 改造后的BaseModal
function BaseModal({ headerRender, bodyRender, footer }) {
  const [searchValue, setSearchValue] = useState('');

  return (
    <div className="modal">
      {headerRender({ searchValue, setSearchValue })}
      {bodyRender({ searchValue })}
      {footer}
    </div>
  );
}

// 使用改造后的BaseModal
function SearchModal() {
  return (
    <BaseModal
      headerRender={({ searchValue, setSearchValue }) => (
        <div className="modal-header">
          <input
            type="text"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            placeholder="搜索..."
          />
        </div>
      )}
      bodyRender={({ searchValue }) => {
        const filteredData = yourDataSource.filter(item => item.name.includes(searchValue));
        return (
          <div className="modal-body">
            {filteredData.map(item => <div key={item.id}>{item.name}</div>)}
          </div>
        );
      }}
      footer={<ModalFooter />}
    />
  );
}

这种方式把状态封装在BaseModal内部，父组件只需要关注怎么渲染Header和Body，也不会出现自定义Hook多实例的问题。

3. 受控组件模式（Props回调） #

和状态提升思路类似，但更强调组件的可控性：让BaseModal的Header组件通过回调把搜索值的变化通知给父组件，父组件更新状态后再传递给Body：

// 原BaseModal组件不需要修改
function BaseModal({ header, body, footer }) {
  return (
    <div className="modal">
      {header}
      {body}
      {footer}
    </div>
  );
}

// 受控的搜索头部组件
function SearchHeader({ value, onSearchChange }) {
  return (
    <div className="modal-header">
      <input
        type="text"
        value={value}
        onChange={(e) => onSearchChange(e.target.value)}
        placeholder="搜索..."
      />
    </div>
  );
}

// 使用组件
function SearchModal() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <BaseModal
      header={<SearchHeader value={searchValue} onSearchChange={setSearchValue} />}
      body={<SearchResults searchValue={searchValue} />}
      footer={<ModalFooter />}
    />
  );
}

这种方式逻辑清晰，组件职责明确，同样不需要Context。

总结：你的场景是Modal内部子组件的状态共享，完全没必要用React Context（Context更适合跨多层嵌套的组件共享状态）。上面几种方案都比Context更简洁轻量，其中状态提升是最推荐的方案，符合React的设计原则，实现成本最低。

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