Props 未定义 React js

Posted 2023-02-21

【中文标题】Props 未定义 React js

【英文标题】：Props is not defined React js

【发布时间】：2017-12-04 15:15:04

【问题描述】：

我正在使用 react js，但我不知道为什么我得到的 props 没有定义。

这是我的课。

import React,  Component  from 'react';

const InputHeight = 
    height: '50px',


function clearData() 
    this.refs.input.value = "";




export default class TextInput extends Component 
    render() 
        return (
            <input
                className="form-control"
                ref="input"
                name=props.name
                type=props.inputType
                value=props.content
                pattern=props.pattern
                onChange=props.controlFunc
                placeholder=props.placeholder
                style=InputHeight
                required />
        );
    



TextInput.propTypes = 
    inputType: React.PropTypes.oneOf(['text', 'number', 'email']).isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
;

编译失败 ./src/components/Parts/SmallBits/FormItems/TextInput.js 第 19 行： 'props' 未定义 no-undef 第 20 行：'props' 未定义 no-undef 第 21 行：'props' 未定义 no-undef 第 22 行： 'props' 未定义 no-undef 第 23 行：'props' 未定义 no-undef 第 24 行：'props' 未定义 no-undef

搜索关键字以了解有关每个错误的更多信息。

this.refs.form.clearData();

只需单击它，它就会给我

未捕获的类型错误：无法读取 null 的属性 'refs'

【问题讨论】：

@DavinTryon 为你更新了

this.props 而不是props

【参考方案1】：

在一个类中，访问道具的方式是this.props，而不仅仅是props。

export default class TextInput extends Component 
    render() 
        return (
            <input
                className="form-control"
                ref="input"
                name=this.props.name
                type=this.props.inputType
                value=this.props.content
                pattern=this.props.pattern
                onChange=this.props.controlFunc
                placeholder=this.props.placeholder
                style=InputHeight
                required />
        );
    

这是您的代码随此更改而修改的代码。

至于这个功能

function clearData() 
    this.refs.input.value = "";

我相信你有 2 个问题。首先，它没有嵌套在类中，所以this 关键字不是指这个类。其次，即使它是嵌套的，一旦调用者调用此函数，this 关键字的上下文现在将不再引用您的类。了解this 关键字的工作原理以及如何使用bind 或=> 函数来解决此问题非常重要。

【讨论】：

这修复了它，但破坏了我的清除功能 p.s 清除功能是从清除按钮所在的父级调用的

@andywilson 我已经更新了我的答案以解决您的明确功能。希望对您有所帮助。

你如何让 VSCode 在类组件中为所有具有props.[propertyName] 的行添加红色错误下划线区域，这应该是this.props.[propertyName]？

【参考方案2】：

import React,  Component  from 'react';

const InputHeight = 
    height: '50px',


function clearData() 
    this.refs.input.value = "";




export default class TextInput extends Component 
    render(props) 
        return (
            <input
                className="form-control"
                ref="input"
                name=props.name
                type=props.inputType
                value=props.content
                pattern=props.pattern
                onChange=props.controlFunc
                placeholder=props.placeholder
                style=InputHeight
                required />
        );
    

【讨论】：

A code-only answer is not high quality。虽然此代码可能很有用，但您可以通过说明其工作原理、工作方式、何时应该使用以及它的局限性来改进它。请edit您的回答包括解释和相关文档的链接。