意外错误在 es6 中使用 react 创建 createClass

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>
    )
  }
}