时间戳

首页 > 解决方案 > 重用包含上下文的组件

javascript - 重用包含上下文的组件

问题描述

我有一个在内部使用上下文的复杂组件。例如：

// ComplexComponent.tsx

const MyContext = createContext({});
export function useMyContext() {
  return useContext(MyContext);
}

export default function ComplexComponent({ fooValue }) {
  return (
    <MyContext.Provider value={{ foo: fooValue }}>
      <NestedComponent />
    </MyContext.Provider>
  );
}

// NestedComponent.tsx

import { useMyContext } from './ComplexComponent';

export default function NestedComponent() {
  const { foo } = useMyContext();
  return (
    <div>
      { foo }
    </div>
  );
}

有没有办法动态生成上下文，以便我可以在代码的其他地方重用这个组件（同时发生一些实例）？

显然我必须把createContext函数放在里面 ComplexComponent，但是我将无法导入useMyContext。

标签： javascriptreactjsreact-hooks

解决方案

从Context 文档：

Context 旨在共享可被视为 React 组件树“全局”的数据

据我了解您的问题是，我认为 React 不Context支持您想要实现的目标。

作为一种潜在的替代方法，您可以定义一个可以从嵌套组件调用的 setter 函数，但是：

// ComplexComponent.tsx

// ...

export default function ComplexComponent({ fooValue }) {
  const [foo, setFoo] = useState(fooValue);
  return (
    <MyContext.Provider value={{ foo, setFoo }}>
      <NestedComponent />
    </MyContext.Provider>
  );
}

然后像这样“动态地”设置它：

// NestedComponent.tsx

// ...

export default function NestedComponent() {
  const { foo, setFoo } = useMyContext();
  setFoo("New Foo Value");
  return (
    <div>
      { foo }
    </div>
  );
}

这里需要注意的是，这将更新foo上下文中每个消费者的值。我会争辩说，如果您想要具有不同值的不同组件foo，最好将fooValue's 传递给它们作为props.

推荐阅读