Javascript ReactJs组件安装

我的应用程序有一些问题，我不是Javascript专家，但它很容易修复。 我需要打个电话

this.props.onNavStyleChange(NAV_STYLE_FIXED);

加载此页面时更改我的导航。但它给出的错误就像

第13行：分析错误：意外标记，应为“；”

这是完整的代码

import React, { Component, Fragment } from "react";
import { Col, Menu, Icon, Row } from "antd";
import { connect } from "react-redux";

import { Redirect, Route, Switch, Link } from "react-router-dom";
import asyncComponent from "util/asyncComponent";
import {
    NAV_STYLE_FIXED,
} from "../../constants/ThemeSetting";

import { onNavStyleChange } from "appRedux/actions/Setting";

componentDidMount() {
    this.props.onNavStyleChange(NAV_STYLE_FIXED);
}


const Dashboard = ({ match, isAuthenticated }) => (


    <div className="gx-main-content-wrapper">

    <Col span={24}>

            <Switch>
                <Redirect exact from={`${match.url}/`} to={`${match.url}/Dashboard`} />

                <Route path={`${match.url}/dashboard`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Dashboard'))
                        : () => <Redirect to="/home" />} />


                <Route path={`${match.url}/news`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./News'))
                        : () => <Redirect to="/home" />} />

                <Route path={`${match.url}/servers`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Servers'))
                        : () => <Redirect to="/home" />} />

                <Route path={`${match.url}/billing`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Billing'))
                        : () => <Redirect to="/home" />} />


                <Route path={`${match.url}/serverInfo/:id`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./ServerInfo'))
                        : () => <Redirect to="/home" />} />


                <Route path={`${match.url}/support`}
                    component={isAuthenticated
                        ? asyncComponent(() => import('./Support'))
                        : () => <Redirect to="/home" />} />

            </Switch >
    </Col>
    </div>
);

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    };
};

export default connect(mapStateToProps, null)(Dashboard);

import React，{Component，Fragment}来自“React”；
从“antd”导入{Col，Menu，Icon，Row}；
从“react redux”导入{connect}；
从“react router dom”导入{重定向、路由、交换机、链接}；
从“util/asyncComponent”导入asyncComponent；
进口{
导航样式固定，
}来自“../../constants/themeset”；
从“appRedux/actions/Setting”导入{onNavStyleChange}；
componentDidMount（）{
this.props.onNavStyleChange（导航样式固定）；
}
常量仪表板=（{match，isAuthenticated}）=>(
导入（'./仪表板'））
: () => } />
导入（'./新闻'））
: () => } />
导入（'./服务器'））
: () => } />
导入（'./计费'））
: () => } />
导入（'./ServerInfo'））
: () => } />
导入（'./支持'））
: () => } />
);
常量mapStateToProps=状态=>{
返回{
isAuthenticated:state.auth.token！==null
};
};
导出默认连接（MapStateTops，null）（仪表板）；

const Dashboard=（{match，isAuthenticated}）=>{
React.useffect（（）=>{
onNavStyleChange（导航样式固定）；
}, []);
返回(
...
);
};

---

具有空依赖项数组的类似于

componentDidMount

。在功能组件内部，您必须使用钩子而不是类实例方法。

代码中有几处不正确，但我将介绍所有内容

---

您看到的错误是因为

componentDidMount

是作为函数编写的，但没有声明为函数

即

函数组件didmount（）{
this.props.onNavStyleChange（导航样式固定）；
}
常量组件didmount=（）=>{
this.props.onNavStyleChange（导航样式固定）；
}

---

componentDidMount

生命周期仅在基于类的组件中可用

如果您想使用功能组件，那么需要查看挂钩。在这种情况下，您将看到

---

componentDidMount

是

React.Component

/

React.PureComponent

的属性。您必须扩展这些类中的一个才能使用它。你可以在这里找到更多信息-。由于您使用的是FunctionalComponent，因此也可以使用

useEffect

，因为这是函数的等效项。是的，但在本例中，说明onNavStyleChange不是一个我输入错误的函数。这是一个进口而不是道具。请再次检查我的代码。

class MyComponent extends React.Component {
  ...
  componentDidMount() { ... }
  ...
}

function MyComponent() {
  useEffect(() => {
    ...
  }, [])
}