将 componentDidMount 添加到 React 组件会导致语法错误答案

【问题标题】：Adding componentDidMount to React component results in syntax error将 componentDidMount 添加到 React 组件会导致语法错误
【发布时间】：2018-10-01 06:01:02
【问题描述】：

我的 home 组件有：

const Home = () => (
  <div>
    <Head title="Home" />
    <Nav />

    <div className="container o_block u_blue">
      <div className="notification">
        This container is <strong>centered</strong> on desktop.
      </div>
    </div>
  </div>
)

export default Home

我正在尝试在该组件中添加一些 DOM 操作：

componentDidMount() {
  let burger = document.querySelector('.burger');
  let nav = document.querySelector('#'+burger.dataset.target);
  burger.addEventListener('click', function(){
    burger.classList.toggle('is-active');
    nav.classList.toggle('is-active');
  });
}

const Home = () => (
  <div>
    <Head title="Home" />
    <Nav />

    <div className="container o_block u_blue">
      <div className="notification">
        This container is <strong>centered</strong> on desktop.
      </div>
    </div>
  </div>
)

export default Home

但不幸的是，我得到了一个：

SyntaxError: Unexpected token, expected ";" (8:20)

我做错了什么，我应该把方法放在哪里？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

Home 是代码中的一个展示组件。这意味着表示组件就像 Java Script 中的纯函数。 Presentational 组件不调用任何 React 生命周期方法，也不修改 React 状态。它只接受 props 并返回 jsx 元素。这在 react 中也称为无状态组件。

如果你想使用 React 生命周期方法，那么你应该使用 statefull 组件。

componentDidMount 是 React 生命周期方法之一，因此在 React 中的表示或功能组件中无法访问它。

编辑：

如果您想在组件初始渲染之前进行 DOM 操作，请在 componentWillMount() 方法中进行 DOM 操作，但请参阅此方法在最新的 React 版本中已弃用。

如果您想在第一次渲染后进行 DOM 操作，请在 componentDidMount() 方法中进行。这是您还可以进行 axios 调用并相应地执行 setState 的方法。我建议你使用 componentDidMount()。

  import React, { Component} from "react";

  export default class Home extends Component {
      componentDidMount() {
       let burger = document.querySelector('.burger');
       let nav = document.querySelector('#'+burger.dataset.target);
        burger.addEventListener('click', function(){
         burger.classList.toggle('is-active');
         nav.classList.toggle('is-active');
        });
       }
      render(){
         return(
          <div>
           <Head title="Home" />
           <Nav />
          <div className="container o_block u_blue">
             <div className="notification">
                This container is <strong>centered</strong> on desktop.
           </div>
        </div>
     </div>
    )
    }
   }

由于我在手机上回答，如有任何拼写错误，请见谅

【讨论】：

我只是想调用一些 DOM 操作，有没有一种传统的方式来放置文档后放置它。
谢谢，但是当我尝试时，我收到了 Cannot call a class as a function 不确定我做错了什么
您必须完全更改您的组件，就像我在回答中提到的那样。请检查我的答案
@supersize 很高兴看到我的回答对您有帮助。感谢您接受我的回答。请也投赞成票。谢谢

【解决方案2】：

您需要将您的组件转换为基于类的组件，如下所示：

export default class Home extends React.Component {

   render() {
       // Return the JSX code
   }

   componentDidMount() {
       // Your init code
   }

}

但我真的建议你看一下官方的 React 文档，因为这是一个相当简单的错误。

【讨论】：

不工作，我收到了Cannot call a class as a function 与您的示例
@supersize 你应该将 React 组件用作 React 组件，而不是函数。
不确定这是什么意思？
我忘了在类中添加“扩展 React.Component”。