Reactjs 为什么不是'；t此处传递给子级的状态（TypeScript/React/SPFX）

在这个示例中，我有一个父类组件：Dibf。 我有一个子类组件：Header

我能设法把道具从父母传给孩子。但我正试图通过这样做来传递状态（下面代码块的底线）：

导出接口状态{
CurrentUserTitle:字符串；
当前用户：字符串[]；
CurrentUserGroups:字符串；
CurrentUserID:字符串[]；
CurrentUserEmail:string；
全名：字符串；
UniId：字符串；
FilteredItems:IDibfItems[]；
作者：字符串；
CurrentUserRole:string；
项目：项目[]；
部门列表：IDROPDONOPTION[]；
SelectedDept：字符串；
Id：编号；
JobRef：字符串；
FormStatus：字符串；
标题：字符串；
职位名称：字符串；
日期：日期；
发现日期：日期；
附带细节：字符串；
PersonalData：字符串；
PhoneNo:string；
部门：字符串；
子部门：字符串；
LoggedInUser：字符串；
LoggedInUserPPDefaultItems:字符串[]；
}
导出接口IDibfProps{
描述：字符串；
上下文：WebPartContext；
}
导出默认类Dibf扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
CurrentUserTitle:null，
当前用户：null，
CurrentUserGroups:null，
CurrentUserID:null，
CurrentUserEmail:null，
全名：null，
UniId:null，
过滤数据项：[]，
作者：null，
CurrentUserRole:null，
项目：[]，
部门列表：[]，
SelectedDept:未定义，
Id:null，
JobRef:null，
标题：空，
职务名称：空，
日期：空，
DateOfDiscovery:空，
附带信息：空，
PersonalData:null，
FormStatus:null，
电话号码：空，
部门：空，
子部门：空，
LoggedInUser:null，
LoggedInUserPPDefaultItems:[]，
};
//this.handler=this.handler.bind（this）；
this.\u getDepartments=this.\u getDepartments.bind（this）；
this.\u getUser=this.\u getUser.bind（this）；
}
//公共处理程序（事件）{
//这是我的国家({
//值：event.target.value
//   });
// }
public render（）：React.ReactElement{
返回(
数据表

如您所见，我提供了TypeScript.State和Props所需的两个接口。您还可以看到我正在尝试将CurrentUserTitle状态传递给子组件。如下所示：

export class Header extends React.Component<any, {}> {

  public render(): React.ReactElement<{}> {
    return (


          <div>
              <Label>Hello {this.props.usertitle}</Label>

          <div className={styles.row}>   
              <DefaultButton className={styles.clearButton}
                disabled={false}
                checked={true}
                text="Clear Form"
                onClick={this.props.handler}
              />

导出类头扩展React.Component{
public render（）：React.ReactElement{
返回(
你好{this.props.usertitle}

如您所见，props的

React.Component

被设置为

any

，这允许我在将其设置为原来的

{}

时避免出现错误消息。 不幸的是，组件中没有显示任何内容

如果有帮助，则如果我为组件放置

React.Component

，则显示的错误为：

'只读{children？：ReactNode；}>&ReadOnly类型上不存在属性usertitle'

有人能告诉我如何将此状态传递给Header组件，以便更新后再发送回吗？如果这是正确的方法

---

T

如果需要将状态从子组件更新到父组件，则需要将函数作为道具从父组件传递到子组件，并在子组件中调用该函数

如果删除“any”，您会看到错误的原因是，标头组件正在接收一个typescript无法识别的道具。在接口中提供状态和道具将有助于您进行严格的类型检查，我们会明确告知组件应仅具有此道具和状态

interface HeaderProps
{
 usertitle:string
}

export class Header extends React.Component<HeaderProps>

接口头程序
{
usertitle:string
}
导出类标题扩展了React.Component

---

按子组件递增父组件中状态的示例。

如果需要将状态从子组件更新到父组件，则需要将函数作为道具从父组件传递到子组件，并在子组件中调用该函数

如果删除“any”，您会看到错误的原因是，标头组件正在接收一个typescript无法识别的道具。在接口中提供状态和道具将有助于您进行严格的类型检查，我们会明确告知组件应仅具有此道具和状态

interface HeaderProps
{
 usertitle:string
}

export class Header extends React.Component<HeaderProps>

接口头程序
{
usertitle:string
}
导出类标题扩展了React.Component

---

按子组件递增父组件中状态的示例。

在

Dibf

类中，您需要将

处理程序

方法作为属性传递给

标题

组件：

<Header usertitle={this.state.CurrentUserTitle} handler={this.handler.bind(this)}/>

---

在

Dibf

类中，需要将

处理程序

方法作为属性传递给

头

组件：

<Header usertitle={this.state.CurrentUserTitle} handler={this.handler.bind(this)}/>

单击按钮时，我得到一个“对象不支持属性或方法”setState“”。请注意，按钮位于子组件上，它设置状态（状态位于父组件中）。我猜处理程序函数不足以设置所有这些状态？单击按钮时，我得到一个“对象不支持属性或方法”setState“”。请注意，按钮位于子组件上，它设置了状态（状态位于父组件中）。我猜处理程序函数不足以设置所有这些状态？