Javascript 将componentDidMount添加到React组件会导致语法错误_Javascript_Reactjs

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

javascript reactjs

Javascript 将componentDidMount添加到React组件会导致语法错误,javascript,reactjs,Javascript,Reactjs,my home组件具有： const Home = () => ( <div> <Head title="Home" /> <Nav /> <div className="container o_block u_blue"> <div className="notification"> This container is <strong>centered<

my 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

const 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

componentDidMount（）{
设burger=document.querySelector（'.burger'）；
让nav=document.querySelector（“#”+burger.dataset.target）；
burger.addEventListener（'click'，function（）{
burger.classList.toggle（'is-active'）；
nav.classList.toggle（'is-active'）；
});
}
常量Home=（）=>(
此容器在桌面上居中。
)
导出默认主页

但不幸的是，我得到了：

SyntaxError:意外标记，应为“；”（8:20）

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

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

export default class Home extends React.Component {

   render() {
       // Return the JSX code
   }

   componentDidMount() {
       // Your init code
   }

}

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

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

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

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

编辑：

如果要在组件初始渲染之前执行DOM操作，请在componentWillMount（）方法中执行DOM操作，但请注意，此方法在最新版本中已被弃用

如果要在第一次渲染后执行DOM操作，请在componentDidMount（）方法中执行该操作。这是您也进行axios调用并相应地执行setState的一个。我建议您使用componentDidMount（）

import React，{Component}来自“React”；
导出默认类Home extends组件{
componentDidMount（）{
设burger=document.querySelector（'.burger'）；
让nav=document.querySelector（“#”+burger.dataset.target）；
burger.addEventListener（'click'，function（）{
burger.classList.toggle（'is-active'）；
nav.classList.toggle（'is-active'）；
});
}
render（）{
返回(
此容器在桌面上居中。
)
}
}

如果有任何打字错误，请原谅，因为我在手机中应答

不工作，我收到一个

无法使用您的函数调用类

example@supersize您应该将React组件用作React组件，而不是函数。不确定这意味着什么？我忘了添加“扩展React.component”我只想调用一些DOM操作，有没有一种传统的方法在文档送达后放在哪里。谢谢，但是当我尝试时，我得到了一个

不能将类作为函数调用不确定我做错了什么，你必须完全按照我在回答中提到的那样更改组件。请检查我的answer@supersize很高兴看到我的回答对你有帮助。谢谢你接受我的回答。请也投票。谢谢
  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>
    )
    }
   }