javascript - React 复合组件 - 如何 Reactify 子组件？

Question

我对复合组件设计有疑问。我有一个定义 Prop 的包装组件。我使用 Context.Provider 使 props 可用于子内容组件。我希望内容组件的子组件能够对 21 使用react。

限制:我想使用函数组件、钩子(Hook)、没有 Redux、没有 Renderprops。没有 HOC。

const App = () => {
  return (
    <div className="App">
      <Wrapper answer={21}>
        {/* I want to do this below: <p>the answer is {answer}</p> */}
        <Content>
          <p>the answer is answer</p>
        </Content>
      </Wrapper>
    </div>
  );
};

const WrapperContext = createContext();

const Wrapper = ({ children, ...props }) => {
  return (
    <WrapperContext.Provider
      value={{
        ...props
      }}
    >
      {children}
    </WrapperContext.Provider>
  );
};

const Content = ({ children }, ...remainingProps) => {
  const wrapperProps = useContext(WrapperContext);


  return (
    <Wrapper>
      <Card>
        <div id="dialog-description">
          {children}
        </div>
      </Card>
    </Wrapper>
  );
};

Answer 1

<Wrapper answer={21}>
  {/* I want to do this below: <p>the answer is {answer}</p> */}
  <Content>
    <p>the answer is answer</p>
  </Content>
</Wrapper>

所以，显而易见的答案是像<p>the answer is 21</p>那样内联执行。 。如果合适，21 可以来自使用两次的变量。基本上，但是应用程序知道它需要使用 21，让它将其传递到需要它的两个地方。

const App = () => {
  const answer = 21;
  return (
    <div className="App">
      <Wrapper answer={answer}>
        <Content>
          <p>the answer is {answer}</p>
        </Content>
      </Wrapper>
    </div>
  );
};

但我猜测您要解决的实际情况是包装器位于组件树的较高部分，因此您不知道将什么传递给 <p> 。所以内容的工作就是从上下文中获取值，然后用它来渲染。但为了做到这一点，您需要内容组件和应用程序组件之间的两种方式通信。内容需要告诉应用程序“这是我从上下文中获得的值”，然后应用程序可以说“这是我想要根据该值呈现的内容”。

换句话说，您需要一个渲染 Prop ，但您明确排除了这种可能性。如果您愿意接受这种可能性，那么它就是这样的。

const App = () => {
  return (
    <div className="App">
      <Wrapper answer={21}>
        <Content>
          {({ answer }) => <p>the answer is {answer}</p>}
        </Content>
      </Wrapper>
    </div>
  );
};

const Content = ({ children }, ...remainingProps) => {
  const wrapperProps = useContext(WrapperContext);


  return (
    <Wrapper>
      <Card>
        <div id="dialog-description">
          {children(wrapperProps)}
        </div>
      </Card>
    </Wrapper>
  );
};

Content.propTypes = {
  children: PropTypes.func.isRequired,
}