反应复合组件 - 如何反应孩子？

Question

I have a problem with Compound Component Design. I have a Wrapper component defining props. I use a Context.Provider to make props available to a child Content component. I would like children of Content component to reactify {answer} to 21.

RESTRICTIONS: I would like to use function components, hooks, no Redux, no Renderprops. no HOCs.

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>

So, the obvious answer is to just do it inline as in <p>the answer is 21</p> . If appropriate, the 21 can come from a variable which gets used twice. Basically, however App knows that it needs to use 21, have it pass it in to both places where it's needed.

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

But i'm guessing the real situation you're trying to solve has the wrapper in a higher part of the component tree, and so you don't know what to pass in to the <p> . So Content's job will be to grab the value from context, and then use it to render. But in order to do that, you need two way communication between the Content component and the App component. The Content needs to tell the App "here's the value i got from context", and then the App can say "here's what i want to be rendered given that value".

In other words, you need a render prop, but that's something you explicitly excluded as a possibility. If you're willing to entertain that possibility, here's what it would look like.

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,
}

Answer 2

RESTRICTIONS: I would like to use function components, hooks, no Redux, no Renderprops. no HOCs.

Render props and HOCs are not a matter of taste but established solutions to common React problems. Not using them when they are needed will result in poor quality code.

The ugly workaround is to use text templates like <Content><p>the answer is {answer}</p></Content> and process them. Here's an example that is hard-coded to be used with the only child:

const Content = ({ children }, ...remainingProps) => {
  const wrapperProps = useContext(WrapperContext);
  const theOnlyChild = React.cloneElement(children, {}, 
    children.props.children.replace('{answer}`, wrapperProps.answer);
  );

  return (
    <Wrapper>
      {theOnlyChild}
    </Wrapper>
  );
};

That <Content> children can be nested and have arbitrary types makes it even less practical and more complex for real-world use.

This is the use case for render props.

answer is a value that needs to be received at some time. Since there's no answer variable in the scope where it's used ( App function), a new scope function should be introduced where answer value could be injected. This is basically what render prop pattern and its special case, function as child does:

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

  return (
    <Wrapper>
      {children(wrapperProps)}
    </Wrapper>
  );
};

And used like:

  <Wrapper answer={21}>
    <Content>{({ answer }) => (
      <p>the answer is {answer}</p>
    )}</Content>
  </Wrapper>

This is basically what WrapperContext.Consumer is for, so Wrapper and Content components may be redundant.