错误 TS2339：“文件上传”类型上不存在属性“_input”

Question

I am attempting to run the below code but experiencing these errors

Property '_input' does not exist on type 'FileUpload'. Property '_input' does not exist on type 'FileUpload'. Property 'context' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<IFileUploadProps>

export default class FileUpload extends React.Component<IFileUploadProps, {}> {
    public render(): React.ReactElement<IFileUploadProps> {
        return (
            <div className={styles.fileUpload}>
                <div className={styles.container}>
                    <div className={styles.row}>
                        <div className={styles.column}>
                            <span className={styles.title}>SharePoint!</span>
                            <p className={styles.subTitle}> Web Parts.</p>
                            <p className={styles.description}>{escape(this.props.description)}</p>
                            <a href="https://aka.ms/spfx" className={styles.button}>
                                <span className={styles.label}>Learn more</span>
                            </a>
                            <input
                                type="file"
                                ref={(elm) => {
                                    this._input = elm;
                                }}
                            />
                            <p>
                                <button onClick={() => this.uploadFileFromControl()}>Upload</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    private uploadFileFromControl() {
        //Get the file from File DOM
        var files = this._input.files;
        var file = files[0];
        //Upload a file to the SharePoint Library
        sp.web
            .getFolderByServerRelativeUrl(this.props.context.pageContext.web.serverRelativeUrl + '/OrderLibrary')
            .files.add(file.name, file, true)
            .then((data) => {
                alert('File uploaded sucessfully');
            })
            .catch((error) => {
                alert('Error is uploading');
            });
    }
}

Answer 1

Sample demo to declare a ref:

//define a variable in component
protected ppl;

<PeoplePicker
              context={this.props.context}
              titleText="People Picker"
              personSelectionLimit={3}
              groupName={''}
              showtooltip={false}
              isRequired={false}
              disabled={false}
              selectedItems={this._getPeoplePickerItems}
              defaultSelectedUsers={this.state.PeoplePickerDefaultItems}
              showHiddenInUI={false}
              principalTypes={[PrincipalType.User]}
              resolveDelay={1000}
              ref={c => (this.ppl = c)} 
            />
 <button onClick={() => {this.ppl.

To use webpart context, you need send it from webpart class.

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

Component property.

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