个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 01:02:06 26 4
gpt4 key购买 nike

我的主页组件有:

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)

我做错了什么以及我应该将该方法放在哪里？

最佳答案

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

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

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

因为是用手机接听，如有错别字，请见谅

关于javascript - 将 componentDidMount 添加到 React 组件会导致语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52580654/

26 4 0
文章推荐： javascript - 获取和显示时间线数据
文章推荐： azure - 将 EntityRecognitionSkill 限制为confidence > .5
文章推荐： Azure 模板 - 根据所选资源组动态生成参数值
文章推荐： Javascript - 从一种 switch 语句情况到另一种 switch 语句
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com