Question

我在类组件内部和外部使用函数语法。谁能向我解释为什么这样写时打印功能可以工作

const UploadButton = (props)=> {

    const fileName = 'myfile';


    props.getFileName(fileName)

    function print(){console.log('onClick worked')}

    return(

        <div>
            <input onClick= {print()} type="file" id = {fileName}/>
        </div>
    )
}

但是当我像在类组件中声明它那样编写它时：

print(){console.log('onClick worked')}

我收到此错误

 Line 10:  Parsing error: Unexpected token, expected ";"

   8 |  props.getFileName(fileName)
   9 | 
> 10 |   print(){console.log('onClick worked')}
     |          ^

Answer 1

此行为与React无关，但从根本上讲是JavaScript中的method与function。当您在某个上下文中声明函数时，它将变为method。因此，在类设置中，函数实际上是方法。在Javascript中，可以在另一个函数中声明一个函数，这就是为什么

const UploadButton = (props)=> {
    const fileName = 'myfile';
    props.getFileName(fileName)
    function print(){console.log('onClick worked')}
    return(
        <div>
            <input onClick= {print()} type="file" id = {fileName}/>
        </div>
    )
}

但是当您不指定function关键字并且声明不在类内部时，它将引发错误。

print(){console.log('onClick worked')}
Parsing error: Unexpected token, expected ";"

如果您更愿意在print=()=>{console.log('onClick worked')}处使用箭头函数，它将起作用，因为它是一个函数表达式，并被视为作用于封闭函数的普通变量声明。

Answer 2

print(){console.log('onClick worked')}

我认为当您在功能组件中编写此代码时，编译器并不知道您正在尝试定义一个函数，而是试图执行print函数，因此它期望一个';'

但是，在使用上述语法定义函数的基于类的组件中，将类转换为函数时，会将打印方法添加到其原型中。

Answer 3

您的功能组件遇到的一个问题是，您正在调用print函数，然后将其返回的值（在这种情况下为undefined）传递给{{1 }} onClick元素的处理程序。

您用于input元素的JSX应该看起来像这样：

input

但是，在处理const UploadButton = (props)=> { // ... return ( <div> <input onClick={print} type="file" id={fileName}/> </div> ) }时，您的class components组件应如下所示：

UploadButton

此外，您可能不应该将class UploadButton extends React.Component { print() { console.log('onClick worked') } render() { // ... this.props.getFileName(fileName) return ( <div> <input onClick={this.print} type="file" id = {fileName}/> </div> ) } }元素用作input。只需使用UploadButton元素，例如以下示例：

button

在类组件内部与内部函数组件之间声明函数

3 个答案: