将componentDidMount添加到React组件会导致语法错误
[英]Adding componentDidMount to React component results in syntax error
问题描述
my home component has: 
我的家庭组件有：
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
and I'm trying to add some DOM manipulation into that component: 并且我正在尝试向该组件中添加一些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
but unfortunately I am getting a: 但不幸的是，我得到了：
SyntaxError: Unexpected token, expected ";"
what am I doing wrong and where should I put the method? 我做错了什么，应该在哪里放置该方法？
2 个解决方案
解决方案1
1 2018-09-30 18:04:41
You need to transform your component into a class-based component, like this : 您需要将您的组件转换为基于类的组件，如下所示：
export default class Home extends React.Component {
render() {
// Return the JSX code
}
componentDidMount() {
// Your init code
}
}
But I really suggest you to take a look at the official React doc as it's a fairly simple mistake. 但我真的建议您看一下React的官方文档，因为这是一个非常简单的错误。
解决方案2
0 已采纳 2018-09-30 18:10:10
Home is a presentational component in your code. 主页是代码中的表示性组件。 Which means a presentational component is like a pure function in Java Script. 这意味着表示性组件就像Java Script中的纯函数一样。 A Presentational component doesn't call any React life cycle method and doesn't modify React state. Presentational组件不会调用任何React生命周期方法，也不会修改React状态。 It only takes props and returns jsx elements. 它只需要props并返回jsx元素。 This is also called as stateless component in react. 这也称为React中的无状态组件。
If you want to play with React life cycle methods then you should go with statefull component. 如果您想使用React生命周期方法，那么应该使用statefull组件。
componentDidMount is one of React life cycle method so it's not accessible in presentational or functional components in React. componentDidMount是React生命周期方法之一，因此无法在React的演示或功能组件中访问。
Edit: 编辑：
If you want to do DOM manipulation before component initial render then do DOM manipulation in componentWillMount() method but please see this method is deprecated in latest React versions. 如果要在组件初始渲染之前进行DOM操作，则可以在componentWillMount（）方法中进行DOM操作，但是请参见此方法在最新的React版本中已弃用。
If you want to do DOM manipulation after first render then do that in componentDidMount() method. 如果要在首次渲染后进行DOM操作，请在componentDidMount（）方法中进行操作。 This is the one wr you also make axios calls and do setState accordingly. 这是您还进行axios调用并相应地执行setState的一个工作。 I would recommend you to go with componentDidMount(). 我建议您使用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>
)
}
}
Please excuse me if there are any typo error because I am answering in my mobile 如果有错字，请原谅，因为我正在用手机接听
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.