javascript - 无法获取数据: this.函数名不是函数(ReactJS)

Question

我在react的组件渲染方法中有一个函数，我在return()内部调用它，如下所示:

render () {
  const Viewperson = () =>{
    return (
      console.log("show perons");
    );
  }
  return (
    {this.Viewperson()}
  );
}

我收到以下错误“无法获取数据:this.Viewperson 不是函数”看不出我哪里出错了。任何建议都是值得赞赏的。

Answer 1

this指类实例。该函数位于 render 内部，而不是类方法:

render () {
  const viewPerson = () => {
    return <div>Person</div>;
  }

  return viewPerson();
}

如果viewPerson是在类本身内部定义的，您可以使用 this :

class Facebook extends Component {

  // ....

  viewPerson() {
    return <div>View Person</div>;
  }

  render() {
    return this.viewPerson();
  }
}

请注意，返回 console.log()很可能会向您显示错误，因为您没有返回任何内容。如果您需要测试它是否正常工作，只需返回一些 JSX ( <div>Hi</div> )。

此外，我对您的代码进行了一些重新格式化。 camelCase通常用于函数或变量声明，PascalCase通常用于类或 JSX 组件。以下是一些示例:

class ViewPerson() ...

function viewPerson() { return <div>...</div> }
const viewPerson = () => (<div>...</div>)

// A more advanced version:
render() {
  // refers to a Component, so PascalCase 👇
  const WhichPerson = teacher ? ViewTeacher : ViewStudent;

 // variable holding JSX, so camelCase 👇
  const person = <WhichPerson>Person details...</WhichPerson>;

  return person;
}

这可能有点令人困惑，所以不要太担心。稍后你会记住它:)