为什么这里的状态没有传递给 child (TypeScript/React/SPFX)

Question

在这个例子中，我有一个 Parent class 组件：Dibf。我有一个 Child class 组件：Header.

我可以设法将道具从 Parent 传递到 child。但是我试图通过这样做来传递状态（下面代码块的底线）：

export interface IDibfState {

    CurrentUserTitle: string;
    CurrentUser: string[];
    CurrentUserGroups: string;
    CurrentUserID: string[];
    CurrentUserEmail: string;
    FullName: string;
    UniId: string;
    FilteredItems: IDibfItems[];
    Author: string;
    CurrentUserRole: string;
    Items: IDibfItems[];
    DepartmentsList: IDropdownOption[];
    SelectedDept: string;
    Id: number;
    JobRef: string;
    FormStatus: string;
    Title: string;
    JobTitle: string;
    Date: Date;
    DateOfDiscovery: Date;
    IncidentDetails: string;
    PersonalData: string;
    PhoneNo: string;
    Department: string;
    SubDepartment: string;
    LoggedInUser: string;
    LoggedInUserPPDefaultItems: string[];
}


export interface IDibfProps {
  description: string;
  context: WebPartContext;

}

export default class Dibf extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      CurrentUserTitle: null,
      CurrentUser: null,
      CurrentUserGroups: null,
      CurrentUserID: null,
      CurrentUserEmail: null,
      FullName: null,
      UniId: null,
      FilteredItems: [],
      Author: null,
      CurrentUserRole: null,
      Items: [],
      DepartmentsList: [],
      SelectedDept: undefined,
      Id: null,
      JobRef: null,
      Title: null,
      JobTitle: null,
      Date: null,
      DateOfDiscovery: null,
      IncidentDetails: null,
      PersonalData: null,
      FormStatus: null,     
      PhoneNo: null,
      Department: null,
      SubDepartment: null,
      LoggedInUser: null,
      LoggedInUserPPDefaultItems: [],

    };

    // this.handler = this.handler.bind(this);
    this._getDepartments = this._getDepartments.bind(this);
    this._getUser = this._getUser.bind(this);
  }

  // public handler(event) {
  //   this.setState({
  //     value: event.target.value
  //   });
  // }

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

        <div className={ styles.dataForm }>
        <div className={ styles.container }>  
          <Label style={{fontSize: '50px'} }> Data Form</Label>    
          <Header usertitle={this.state.CurrentUserTitle}/>

如您所见，我已经提供了 TypeScript 所需的两个接口。状态和道具。您还可以看到我正在尝试将 CurrentUserTitle 状态传递给 child 组件。这是在这里：

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<any, {}> 设置为 any，如果我将其设置为最初的 {}，这使我可以避免出现错误消息。不幸的是组件中没有任何显示。

如果有帮助，如果我为组件输入 React.Component<{}, {}>，则显示的错误是：

'Property usertitle does not exist on type ReadOnly{ children?: ReactNode; }> & ReadOnly<{}>'

谁能告诉我如何将此状态传递给 Header 组件以便对其进行更新然后发送回去？如果这是正确的做事方式。

T

Answer 1

如果您需要将状态从子组件更新到父组件。然后你需要将一个函数作为 prop 从父组件传递给子组件，并在子组件中调用它。

如果您删除 'any'，您会看到错误的原因是，Header 组件正在接收一个 prop，而 typescript 无法识别。在接口中提供 State 和 Props 将帮助您进行严格的类型检查，我们明确告诉组件应该只有这些 props 和 state。

interface HeaderProps
{
 usertitle:string
}

export class Header extends React.Component<HeaderProps>

子组件递增父组件状态的示例。 https://codesandbox.io/s/serverless-pine-w63m0

Answer 2

在您的 Dibf class 中，您需要将 handler 方法作为属性传递给 Header 组件：

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

为什么这里的状态没有传递给 child (TypeScript/React/SPFX)

Why isn't the state being passed down to child here (TypeScript/React/SPFX)

sharepoint

typescript

reactjs

sharepoint-online

spfx