如何在 spfx 反应中发送数据 b/w parent 和 child

Question

我有一个 parent 组件，我想将数据发送到它的 child 组件。

我尝试使用react方法传递数据，但出现错误。

错误：

Type '{ pdata: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly<{}>'. Property 'pdata' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

下面是代码

Parent 文件:

<Modern pdata={this.state.length} />

Child 文件:

import * as React from "react";
export default class Modern extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>Hello Modern {this.props.pdata}</p>
      </div>
    );
  }
}

Answer 1

React is spfx 使用 typescript 。所以你需要为道具创建一个界面。

interface ModernProps {
pdata: number;
}

export default class Modern extends React.Component<ModernProps>

Answer 2

link 记录解释此问题的原因以备不时之需

如何在 spfx 反应中发送数据 b/w parent 和 child

How to send data b/w parent and child in spfx react

sharepoint

reactjs

spfx