javascript - 如何将数据从NewsxWebPart.ts文件发送到Newsx.tsx文件(How to send data from NewsxWebPart.ts file to Newsx.tsx file)

Question

I have tried using this.properties but i'm getting value as undefined in Newsx.tsx file.I'm able to get this.props.description in News.tsx file, But not this.props.data.(我尝试使用this.properties，但是我在Newsx.tsx文件中获得了未定义的值。我能够在News.tsx文件中获得this.props.description，但无法获得this.props.data。)

I'm setting the data in OnInit() which is a async method(我在OnInit（）中设置数据，这是一种异步方法)

Below is my NewsxWebpart.ts file(以下是我的NewsxWebpart.ts文件)

import * as React from 'react';
import * as ReactDom from 'react-dom';

export interface INewsxWebPartProps {
  description: string;
  data:any;

  }

var newst = new Array ;
export default class NewsxWebPart extends BaseClientSideWebPart<INewsxWebPartProps> 
{
    public async onInit(): Promise<void> 
    {
       /* ajax calls to get data */
       /* getting the data inside the variable "newst"*/
       this.properties.data = newst
    }
    public render(){
      /* rendering*/ }
}

And Here is my News.tsx file(这是我的News.tsx文件)

import * as React from 'react';
import styles from './Newsx.module.scss';
import { INewsxProps } from './INewsxProps';

export default class Newsx extends React.Component<INewsxProps, {}> { 

constructor(props:any){
 super(props);
 }
componentDidMount(){
 console.log("Hello "+this.props.description);
  console.log("Hello "+ this.props.data);

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

  ask by user8535404 translate from so

Answer 1

Take passing page context from webpart to component as example(this will be use often).(以从Webpart到组件传递页面上下文为例（这将经常使用）。)

In component property interface,add the property which you need to get from webpart(.ts).(在组件属性界面中，添加需要从webpart（.ts）获取的属性。)

The context will pass from .ts.(上下文将从.ts传递。)

import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IPnpReactProps {
  description: string;
  context: WebPartContext;
}

In webpart(.ts) file, the context will pass to component(.tsx).(在webpart（.ts）文件中，上下文将传递到component（.tsx）。)

public render(): void {
    const element: React.ReactElement<IPnpReactProps > = React.createElement(
      PnpReact,
      {
        description: this.properties.description,
        context:this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }