小编mag*_*agi的帖子

我正在编写一个反应应用程序。核心要求是应用程序完全动态且可配置，包括选择布局、部分和字段、验证等。我有两个 UI。一个是配置 UI，用户可以在其中选择布局、部分、字段（例如 html 组件的类型等）。保存后，我将获取 JSON 数据，需要在其中绘制 UI。这是我的第二个用户界面。我关心的是如何构建组件以使用 JSON 数据呈现 UI。字段和部分将相同，但布局将根据配置 UI 中的选择而有所不同。下面是粗略的 JSON 架构。

{
  title: "Test title",
  layout: [
    {
      name: "layout-a"
    },
    sectionA: {
      name: "breadcrumbs"
      field: [
        {
          name: "test",
          value: "test",
          type: "text"
        }
      ]
    },
    sectionB: {
      name: "actions"
      field: [
        {
          name: "Create",
          value: "Create",
          type: "button"
        }
      ]
    }
  ]
}

我正在考虑使用一个布局组件来渲染 JSON 中的所有子组件。组件如下所示

const Layout = ({ children }) => {
  return (
    <div>
      <div className="container">
        <div className="content">{children}</div>
      </div>
    </div>
  ); …

我有一个父组件和几个子组件。我需要根据 ErrorComponent 禁用或启用父级中的按钮。如果出现错误，则禁用该按钮，否则启用它。我相信我们可以将回调从子级传递给父级，并让父级知道并更新按钮属性。我需要知道如何使用反应钩子来做同样的事情？我尝试了几个例子但没有成功。错误组件上没有事件。如果出现错误（props.errorMessage），那么我需要将一些数据传递给父级，以便我可以禁用该按钮。非常感谢任何帮助

export const Parent: React.FC<Props> = (props) => {
....
const createContent = (): JSX.Element => {
  return (
    {<ErrorPanel message={props.errorMessage}/>}
    <AnotherComponent/>
  );
}
return (
<Button onClick={onSubmit} disabled={}>My Button</Button>
{createContent()}
);
};
export const ErrorPanel: React.FC<Props> = (props) => {
  if (props.message) {
    return (
        <div>{props.message}</div>
    );
  }
  return null;
};

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

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