Question

我在innerFunc中遇到了意外的令牌错误，我不知道为什么会这样。

const TestComp = () => {

  innerFunc(){ //error here?
    console.log('xx')
  }

  render() {
    return(
      <div>test comp content</div>
    )
  }
}

const Something = ({
  something
}) => {
  return(
    <div>{TestComp.toString()}</div>
  )
}

有什么线索？

Answer 1

这就在这里：

const TestComp = () => { // <---- Function starts

  innerFunc(){ // function inside a function needs to be declared with `function` identifer
    console.log('xx')
  }

  render() {
    return(
      <div>test comp content</div>
    )
  }
} // <---- Function ends

是一个功能。

您正在尝试向此函数添加属性，这会导致错误。

您可以像执行此操作一样向类中添加属性。

要解决错误，请定义一个函数，如：

const TestComp = () => {

  function innerFunc(){
    console.log('xx')
  }

  return( // you don't need to define render here, just return the jsx
    <div>test comp content</div>
  )
}

或者更好的是，在这个基于功能的组件之外定义它。

我希望这会有所帮助。

Answer 2

您混淆了功能无状态组件和反应组件的语法

class TestComp extends React.Component {

  innerFunc(){ //error here?
    console.log('xx')
  }

  render() {
    return(
      <div>test comp content</div>
    )
  }
}

意外错误在es6中创建带有react的createClass

2 个答案: