如何將數據傳遞給 {props.children}

Question

關於我在這里提出的后續問題： How to pass data from child to parent component using react hooks我有另一個問題。 下面是組件結構

export const Parent: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const createContent = (): JSX.Element => {
  return (
    <Authorization>
    {<ErrorPanel message={errorMessage} setDisabled={setDisabled}/>}
    <MyChildComponent/>
    </<Authorization>
  );
}

return (
   <Button onClick={onSubmit} disabled={disabled}>My Button</Button>
   {createContent()}
 );
};

const Authorization: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const render = (errorMessage : JSX.Element): JSX.Element => {
    return (
      <>
      {<ErrorPanel message={errorMessage} setDisabled={setDisabled}/>}
      </>
    );
  };

return (
    <>
    <PageLoader
      queryResult={apiQuery}
      renderPage={render}
    />
    {props.children}
    </>
  );
};

我如何將禁用的 state 值從授權組件傳遞給我的孩子，該組件由{props.children}調用我嘗試了 React.cloneElement 和 React.createContext 但我無法將禁用的值傳遞給MyChildComponent 。 一旦通過 Authorization 組件中的ErrorPanel設置了 errorMessage，我就可以看到 disabled 的值為true 。 我需要在授權組件中有React.useEffect嗎？

我在這里錯過了什么？

Answer 1

您需要將React.Children API 與React.cloneElement一起使用：

const Authorization = ({ children }) => {
  const [disabled, setDisabled] = React.useState(false);

  const render = (errorMessage) => {
    return (
      <>{<ErrorPanel message={errorMessage} setDisabled={setDisabled} />}</>
    );
  };

  return (
    <>
      <PageLoader queryResult={apiQuery} renderPage={render} />
      {React.Children.map(children, (child) =>
        React.cloneElement(child, { disabled })
      )}
    </>
  );
};


// | 
// v
// It will inject `disabled` prop to every component's child:
<>
  <ErrorPanel
    disabled={disabled}
    message={errorMessage}
    setDisabled={setDisabled}
  />
  <MyChildComponent disabled={disabled} />
</>

Answer 2

您可以使用React.cloneElement到React.Children.map將disabled prop屬性傳遞給直接子組件

const Authorization: React.FC<Props> = (props) => {
    const [disabled, setDisabled] = React.useState(false);
    const render = (errorMessage : JSX.Element): JSX.Element => {
        return (
          <>
          {<ErrorPanel message={errorMessage} setDisabled={setDisabled}/>}
          </>
        );
      };

    return (
        <>
        <PageLoader
          queryResult={apiQuery}
          renderPage={render}
        />
        {React.Children.map(props.children, child => {
            return React.cloneElement(child, { disabled })
         })}
        </>
      );
};

更新：

由於您希望將父組件 state 更新為，您應該存儲 state 和父組件並自行更新它，而不是將 state 也存儲在子組件中。

export const Parent: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const createContent = (): JSX.Element => {
  return (
    <Authorization setDisabled={setDisabled}>
    {<ErrorPanel message={errorMessage} disabled={disabled} setDisabled={setDisabled}/>}
    <MyChildComponent disabled={disabled}/>
    </<Authorization>
  );
}

return (
   <Button onClick={onSubmit} disabled={disabled}>My Button</Button>
   {createContent()}
 );
};

const Authorization: React.FC<Props> = (props) => {
const render = (errorMessage : JSX.Element): JSX.Element => {
    return (
      <>
      {<ErrorPanel message={errorMessage} disabled={props.disabled} setDisabled={props.setDisabled}/>}
      </>
    );
  };

return (
    <>
    <PageLoader
      queryResult={apiQuery}
      renderPage={render}
    />
    {props.children}
    </>
  );
};