Reactjs 在React函数组件中将对象用作参数

我找不到答案。 我正在使用TS在React中构建一些组件，问题是我正在使用组件框架，每当我尝试将道具发送到功能组件时，如果我尝试使用它们，就会出现下一个错误：

类型“{children？：ReactNode；}”上不存在属性“text”。

代码如下所示： 道具宣言：

    public props: IFirstButton = {
        text: "",
        entity: "",
        selectedField: "",
        context: null,
        onChangeText: this.onChangeText.bind(this)
    };

以下是对组件的调用：

        ReactDom.render(
            React.createElement(AppComponentExample, this.props),
            this._container
        )

    public render(): JSX.Element {
        return (
            <React.Fragment> 
            <PanelBasicExample {...this.props} ></PanelBasicExample>
            </React.Fragment>
        );
      }

export const PanelBasicExample: React.FunctionComponent = (props) => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
  const searchText: any = "Selector Cuenta Bancaria" || props.text;
  console.log(props);
  const panelStyles: Partial<IPanelStyles> = {
    main: {
        alignContent: "center",
        '@media(min-width: 480px)': {
        width: "100%",
        position: "absolute",
        overflow: "hidden auto",
      }
    },
    header: {
      width: "100%",
      textAlign: "center"
    }
  }
  const panelStyle = {
    height: "80%",
    left: "25%",
    right: "25%"
  }
  return (
    <div>
      <DefaultButton text={searchText} onClick={openPanel} />
      <Panel
        headerText="Selector Cuenta Bancaria"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Cerrar"
        style={panelStyle}
        styles={panelStyles}
      >
        <TableExample {...props}></TableExample>
      </Panel>
    </div>
  );
};

调用函数组件的组件：

        ReactDom.render(
            React.createElement(AppComponentExample, this.props),
            this._container
        )

    public render(): JSX.Element {
        return (
            <React.Fragment> 
            <PanelBasicExample {...this.props} ></PanelBasicExample>
            </React.Fragment>
        );
      }

export const PanelBasicExample: React.FunctionComponent = (props) => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
  const searchText: any = "Selector Cuenta Bancaria" || props.text;
  console.log(props);
  const panelStyles: Partial<IPanelStyles> = {
    main: {
        alignContent: "center",
        '@media(min-width: 480px)': {
        width: "100%",
        position: "absolute",
        overflow: "hidden auto",
      }
    },
    header: {
      width: "100%",
      textAlign: "center"
    }
  }
  const panelStyle = {
    height: "80%",
    left: "25%",
    right: "25%"
  }
  return (
    <div>
      <DefaultButton text={searchText} onClick={openPanel} />
      <Panel
        headerText="Selector Cuenta Bancaria"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Cerrar"
        style={panelStyle}
        styles={panelStyles}
      >
        <TableExample {...props}></TableExample>
      </Panel>
    </div>
  );
};

public render（）：JSX.Element{
返回(
);
}

最后，功能组件：

        ReactDom.render(
            React.createElement(AppComponentExample, this.props),
            this._container
        )

    public render(): JSX.Element {
        return (
            <React.Fragment> 
            <PanelBasicExample {...this.props} ></PanelBasicExample>
            </React.Fragment>
        );
      }

export const PanelBasicExample: React.FunctionComponent = (props) => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
  const searchText: any = "Selector Cuenta Bancaria" || props.text;
  console.log(props);
  const panelStyles: Partial<IPanelStyles> = {
    main: {
        alignContent: "center",
        '@media(min-width: 480px)': {
        width: "100%",
        position: "absolute",
        overflow: "hidden auto",
      }
    },
    header: {
      width: "100%",
      textAlign: "center"
    }
  }
  const panelStyle = {
    height: "80%",
    left: "25%",
    right: "25%"
  }
  return (
    <div>
      <DefaultButton text={searchText} onClick={openPanel} />
      <Panel
        headerText="Selector Cuenta Bancaria"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Cerrar"
        style={panelStyle}
        styles={panelStyles}
      >
        <TableExample {...props}></TableExample>
      </Panel>
    </div>
  );
};

export const panel基本示例：React.FunctionComponent=（props）=>{
const[isOpen，{setTrue:openPanel，setFalse:dismissPanel}]=useBoolean（false）；
const searchText:any=“Selector Cuenta Bancaria”| | props.text；
控制台日志（道具）；
常量面板样式：部分={
主要内容：{
内容：“中心”，
“@介质（最小宽度：480px）”：{
宽度：“100%”，
位置：“绝对”，
溢出：“隐藏自动”，
}
},
标题：{
宽度：“100%”，
textAlign：“居中”
}
}
常量面板样式={
身高：“80%”，
左：“25%”，
右图：“25%。”
}
返回(
);
};

---

PD：控制台日志记录了我所期望的内容（包含我所需数据的正确对象）

问题很可能是带有

DefaultButton

组件的类型声明（您在问题代码中没有提供）

---

将text:string添加到props DefaultButton接受。

错误在哪里？每当我尝试在函数组件中使用props的属性时！谢谢你的帮助！默认按钮来自Fluent UI，这就是我没有提供代码的原因。因此，我无法更改props DefaultButton accepts。明白了，请尝试“npm install@types/”，有时在使用typescript时，除了正常的软件包外，还需要下载类型防御