Question

我的家庭组件具有：

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：意外令牌，预期为“;” （8:20）

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

Answer 1

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

export default class Home extends React.Component {

   render() {
       // Return the JSX code
   }

   componentDidMount() {
       // Your init code
   }

}

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

Answer 2

主页是代码中的表示性组件。这意味着表示性组件就像Java Script中的纯函数一样。 Presentational组件不会调用任何React生命周期方法，也不会修改React状态。它只需要props并返回jsx元素。在反应中也称为无状态组件。

如果您想使用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>
    )
    }
   }

如果有错字，请原谅，因为我正在用手机接听电话

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

2 个答案: