Question

我有一个React组件，该组件正在迁移到tsx文件，并且出现错误Property 'name' does not exist on type 'NameComponent'。

这是我的组成部分：

class NameComponent extends React.Component<NameComponentProps> {
    render() {
        return (
            <Modal>
                <Modal.Header>
                    Enter Name
                </Modal.Header>
                <Modal.Body>
                    <FormGroup>
                        <ControlLabel>Name: </ControlLabel>
                        <FormControl type="text"
                            placeholder='Enter name'
                            inputRef={(ref) => this.name = ref}
                            onChange={() => this.props.onValidate({ name: this.name.value })}
                        />
                        <FormControl.Feedback />
                    </FormGroup>
               </Modal.Body>
            </Modal>
        );
    }
}

出现this.name时出现红色下划线。当我拥有.js格式的文件时，这种方法可以解决。

如何解决此错误？

Answer 1

您可以在组件上添加一个私有类字段，该字段将存储name HTMLInputElement。

class NameComponent extends React.Component<NameComponentProps> {
    private name: HTMLInputElement;

    render() {
        return (
            <Modal>
                <Modal.Header>
                    Enter Name
                </Modal.Header>
                <Modal.Body>
                    <FormGroup>
                        <ControlLabel>Name: </ControlLabel>
                        <FormControl type="text"
                            placeholder='Enter name'
                            inputRef={(ref) => this.name = ref}
                            onChange={() => this.props.onValidate({ name: this.name.value })}
                        />
                        <FormControl.Feedback />
                    </FormGroup>
               </Modal.Body>
            </Modal>
        );
    }
}

具有实例变量的引用给出错误

1 个答案: