如何将数据传递给 {props.children}

Question

关于我的后续问题：如何使用反应挂钩将数据从子组件传递到父组件， 我还有另一个问题。下面是组件结构

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}
    </>
  );
};

如何将禁用状态值从授权组件传递给我的孩子，该值由 {props.children} 我尝试过 React.cloneElement 和 React.createContext 调用，但我无法将禁用的值获取到MyChildComponent. 一旦通过授权组件true设置了 errorMessage，我就可以看到禁用的值。ErrorPanel我需要加入React.useEffect授权组件吗？

我在这里缺少什么？

Answer 1

您需要将React.ChildrenAPI 与以下内容一起使用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} />
</>