在类组件内声明函数与在功能组件内声明函数

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

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

我认为，当您在函数式组件中编写此代码时，编译器并不知道您正在尝试定义一个函数，而是尝试执行打印函数，因此它需要一个 ';'

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

Answer 2

您的功能组件遇到的一个问题是您正在调用print 函数，然后将它返回的任何内容（在本例中为undefined）传递给@ 的onClick 处理程序987654324@元素。

input 元素的 JSX 应如下所示：

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 元素，类似于以下示例：

<form>
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id={fileName} />
  </div>

  <div>
    <!--Should be something along the lines of `this.handleSubmit` 
        rather than `this.print`, but you get the idea-->
    <button onClick={this.print}>Submit</button>
  </div>
</form>

Answer 3

这种行为与 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')}，它会起作用，因为它是一个函数表达式，并且被视为作用于封闭函数的普通变量声明。