Javascript 编写此代码的最佳方法是什么？

我遇到了这个问题，我需要传递到组件头Common props isMain。我该怎么写？此外，它还显示一个令人不快的错误

import React, { Component } from 'react';

import Index from './index/Layout/Layout';
import Gallery from './gallery/Layout/Layout';
import HeaderCommon from './Common/Header/Header';
import FooterCommon from './Common/Footer/Footer';
import { Route } from 'react-router-dom';

class Path extends Component {
   state = {
       isMain: null
   };

   render() {
       if (window.location.pathname === '/') {
           this.setState({ isMain: true });
       } else if (window.location.pathname === '/ourworks') {
           this.setState({ isMain: false });
       }

       return (
           <div>
               <HeaderCommon isMain={this.state.isMain} />
               <Route path='/' exact component={Index} />
               <Route path='/ourworks' exact component={Gallery} />
               <FooterCommon />
           </div>
       );
   }
}

export default Path;

import React，{Component}来自'React'；
从“./Index/Layout/Layout”导入索引；
从“./Gallery/Layout/Layout”导入库；
从“./Common/Header/Header”导入HeaderCommon；
从“./Common/Footer/Footer”导入FooterCommon；
从'react router dom'导入{Route}；
类路径扩展组件{
状态={
伊斯曼：空
};
render（）{
如果（window.location.pathname==='/'））{
this.setState（{isMain:true}）；
}else if（window.location.pathname=='/ourworks'）{
this.setState（{isMain:false}）；
}
返回(
);
}
}
导出默认路径；

错误：

---

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

通过修改

render（）

函数中的状态，将导致连续渲染

相反，我将执行以下操作-不使用for

isMain

状态变量：

render() {
    let isMain = false;

    if (window.location.pathname === '/') {
        isMain = true;
    } else if (window.location.pathname === '/ourworks') {
        isMain = false;
    }

    return (
        <div>
            <HeaderCommon isMain={isMain} />
            <Route path='/' exact component={Index} />
            <Route path='/ourworks' exact component={Gallery} />
            <FooterCommon />
        </div>
    );
}

render（）{
让伊斯曼=假；
如果（window.location.pathname==='/'））{
伊斯曼=真；
}else if（window.location.pathname=='/ourworks'）{
伊斯曼=假；
}
返回(
);
}

甚至更短：

render() {
    const isMain = window.location.pathname === '/';

    return <div>
        <HeaderCommon isMain={isMain} />
        <Route path='/' exact component={Index} />
        <Route path='/ourworks' exact component={Gallery} />
        <FooterCommon />
    </div>
}

render（）{
const isMain=window.location.pathname==='/'；
返回
}

---

我希望这有帮助

通过修改

render（）

函数中的状态，可以导致连续渲染

相反，我将执行以下操作-不使用for

isMain

状态变量：

render() {
    let isMain = false;

    if (window.location.pathname === '/') {
        isMain = true;
    } else if (window.location.pathname === '/ourworks') {
        isMain = false;
    }

    return (
        <div>
            <HeaderCommon isMain={isMain} />
            <Route path='/' exact component={Index} />
            <Route path='/ourworks' exact component={Gallery} />
            <FooterCommon />
        </div>
    );
}

render（）{
让伊斯曼=假；
如果（window.location.pathname==='/'））{
伊斯曼=真；
}else if（window.location.pathname=='/ourworks'）{
伊斯曼=假；
}
返回(
);
}

甚至更短：

render() {
    const isMain = window.location.pathname === '/';

    return <div>
        <HeaderCommon isMain={isMain} />
        <Route path='/' exact component={Index} />
        <Route path='/ourworks' exact component={Gallery} />
        <FooterCommon />
    </div>
}

render（）{
const isMain=window.location.pathname==='/'；
返回
}

---

我希望这有帮助

反应性挂钩溶液

基于类的解决方案的一个替代方案是React新添加的钩子

React挂钩是在React v16.8中引入的，它大大减少了代码初始化和呈现组件所需的样板文件

如果您感兴趣，我强烈建议您浏览React钩子文档

代码

import React，{Component，useState，useffect}来自“React”；
从“./Index/Layout/Layout”导入索引；
从“./Gallery/Layout/Layout”导入库；
从“./Common/Header/Header”导入HeaderCommon；
从“./Common/Footer/Footer”导入FooterCommon；
从'react router dom'导入{Route}；
导出常量路径=（道具）=>{
常量[isMain，setIsMain]=useState（null）；
useffect（（）=>{
setIsMain（window.location.pathname==='/'））
}, []);
返回(
);
};

使用状态钩子 useState钩子是React功能组件中的常见位置，直接从React with

import{useState}从“React

导入

我们只需在函数表达式中提供一个默认值，例如，

useState（null）

，它将初始状态设置为null值。我们可以将该值设置为任何值、数据结构或对象

我们指定了一种方法来访问和设置数组分解的状态：

const[isMain，setIsMain]=useState（null）；

现在，我们可以通过调用isMain访问我们的状态，或者通过setIsMain设置状态

使用效果挂钩 useEffect钩子类似于基于类的React中的

componentDidMount

和

componentDidUpdate

生命周期方法。此钩子将根据传递给此钩子的第二个参数自动调用。如果未提供第二个参数，则钩子将自动充当

componentDidUpdate

在上面的解决方案中，我将一个空数组（[]）作为第二个参数传递给useEffect挂钩回调。这意味着状态值仅在组件初始呈现时更新，并且实际上相当于

componentDidMount

useEffect(() => {
    setIsMain(window.location.pathname === '/')
}, []);

另外，我们可以将值传递到此数组中，以告知React组件何时应该重新渲染，但这超出了回答的范围

---

同样，有关useState钩子、useEffect钩子和React钩子的更多详细信息，可以在。

React钩子解决方案中找到

基于类的解决方案的一个替代方案是React新添加的钩子

React挂钩是在React v16.8中引入的，它大大减少了代码初始化和呈现组件所需的样板文件

如果您感兴趣，我强烈建议您浏览React钩子文档

代码

import React，{Component，useState，useffect}来自“React”；
从“./Index/Layout/Layout”导入索引；
从“./Gallery/Layout/Layout”导入库；
从“./Common/Header/Header”导入HeaderCommon；
从“./Common/Footer/Footer”导入FooterCommon；
从'react router dom'导入{Route}；
导出常量路径=（道具）=>{
常量[isMain，setIsMain]=useState（null）；
useffect（（）=>{
setIsMain（window.location.pathname==='/'））
}, []);
返回(
);
};

使用状态钩子