Javascript 使用'；类名'；考虑到BEM

所以，这里的新手。。。首先，我要说我有一个简单的单页应用程序，它由几个简单的页面组成

使用react路由器，我为我的组件设置了“自上而下”的设置。要让您了解我的SPA结构，请参见以下内容：

index -- layout(react routers) --
                                |--About Page
                                |--Home Page
                                |--Contact Page

我正在从我的主页组件中呈现一个名为“GlobalHero”的组件

这是GlobalHero.jsx组件。

import React from "react";
var classNames = require('classnames');
import s from '../../../index.scss';

class GlobalHero extends React.Component {

    constructor() {
        super();
        //sets initial state
        this.state = {
            fadeIn: "",
            titleSelected: "",
            subTitleSelected: ""
        };
    }

    // <<========= ON COMPONENT RENDER =========
    componentDidMount = () => {
        console.log("GlobalHero");
        console.log(this.props);
        this.handleClass("fadeIn");
    }
    // =========>>

    // <<========= CONTROLS THE STATE =========
    handleClass = (param) => {
        if (param === "fadeIn" && this.state.fadeIn != "true") {
            this.setState({fadeIn: "true"});
        }
        if (param === "titleSelected" && this.state.titleSelected != "true") {
            this.setState({titleSelected: "true"});
        }
        if (param === "subTitleSelected" && this.state.subTitleSelected != "true") {
            this.setState({subTitleSelected: "true"});
        }
    }
    // =========>>

    render() {

        const heroImg = require(`../../../images/hero${this.props.page}.jpg`);

        //REMOVES CLASS IN REALTIME BASED ON STATE'S VALUE =========
        var containerClasses = classNames({
            [s['text-center']]: true,
            [s["hidden"]]: this.state.fadeIn != "true",
            [s["fadeIn"]]: this.state.fadeIn === "true"
        });
        var titleClasses = classNames({
            [s['blue']]: this.state.titleSelected === "true"
        });
        var subTitleClasses = classNames({
            [s['subTitle']]: true,
            [s['text-center']]: true,
            [s['blue']]: this.state.subTitleSelected === "true"
        });
        // =========>>

        return (
            <div className={s["container-fluid"]}>
                <div className={s["row"]}>
                    <div className={s["col-lg-16"]}>

                        <div className={containerClasses}>
                            <img src={heroImg} className={s["hero__img"]}></img>
                            <h1 onClick={() => this.handleClass("titleSelected")} className={titleClasses}>{this.props.page}!</h1>
                            <p className={subTitleClasses} onClick={() => this.handleClass("subTitleSelected")}>{this.props.name}, {this.props.age}, {this.props.city}</p>
                        </div>

                    </div>
                </div>
            </div>
        );
    }
}

export default GlobalHero;

从“React”导入React；
var classNames=require（'classNames'）；
从“../../../index.scss”导入s；
类GlobalHero扩展了React.Component{
构造函数（）{
超级（）；
//设置初始状态
此.state={
法丹：“，
标题：“，
副标题：“已选定”
};
}
// >
// >
render（）{
const-herogramg=require（`../../../images/hero${this.props.page}.jpg`）；
//根据状态值实时删除类=========
var containerClasses=类名({
[s['text-center']]：对，
[s[“hidden”]：this.state.fadeIn！=“true”，
[s[“fadeIn”]：this.state.fadeIn==“true”
});
var titleClasses=classNames({
[s['blue']]：this.state.titleSelected==“true”
});
var classes=类名({
[s['subTitle']]：对，
[s['text-center']]：对，
[s['blue']]：this.state.subTitleSelected==“true”
});
// =========>>
返回(
this.handleClass（“titleSelected”）}className={titleclass}>{this.props.page}！
this.handleClass（“subTitleSelected”）}>{this.props.name}，{this.props.age}，{this.props.city}
);
}
}
导出默认GlobalHero；

我注意到为组件的元素分配几个简单的类名有很多复杂性

我想知道是否有更好的做法来做这件事？大概 使用外部js页面管理我的类名

欢迎您的任何意见或建议。。。感谢您的支持。

您的标题提到了，但看起来您正在使用，它的灵感来源于相似的想法，但不是相同的东西

无论如何，这是相当主观的，但我有一些想法太多，无法纳入评论：

• 假设您是通过Webpack的

  css加载程序

  使用css模块，您可以使用

  camelCase

  使您的样式属性更加友好：

  loader: "css-loader?modules&camelCase"
  

  现在，对于

  .text center

  css类名，您可以简单地使用

  s.textCenter

  而不是

  s[“测试中心”]

• 您可以更好地将其组件化：首先，您对单个组件做了很多工作，但您可以（例如容器、标题、副标题）。其次，您的

  handleClass（）

  方法做了很多工作，您可以使用简单的处理程序调用

  setState（）

  ，而不知道任何类名。换句话说，组件应该有props和state，只有

  render（）

  函数处理如何将其转换为要渲染的类名。在设置状态之前，实际上不需要检查状态的当前值。只需将其设置为应该的值，然后让React为您优化渲染性能
• 使用字符串

  “true”

  和

  “false”

  存储布尔状态标志。。。这使得处理起来很嘈杂，只需存储为布尔值
• 您有很多

  [s[“类名”]]：true

  这是不必要的；如果总是希望呈现类名，只需将其作为参数传递给

  classNames

  ：

  classNames(s.subTitle, { [s.blue]: this.state.subTitleSelected })
  

• 没有理由调用

  componentDidMount

  上的处理程序，只需按照您的要求初始化状态即可
• 看起来您使用的是引导CSS，而不是组件。我强烈建议使用React引导

把这些放在一起，我会有这样的想法：

class GlobalHero extends React.Component {

    state = {
        fadeIn: true,
        titleSelected: false,
        subTitleSelected: false
    };

    handleTitleClick = () => {
        this.setState({titleSelected: true});
    };

    handleSubTitleClick = () => {
        this.setState({subTitleSelected: true});
    };

    render() {
        return (
          <Grid fluid>
            <Row>
              <Col lg={16}>
                <HeroContainer fadeIn={this.state.fadeIn}>
                  <HeroImage page={this.props.page} />
                  <HeroTitle selected={this.state.titleSelected} 
                             onClick={this.handleTitleClick} 
                             page={this.props.page} />
                  <HeroSubTitle selected={this.state.subTitleSelected} 
                                onClick={this.handleSubTitleClick} 
                                name={this.props.name} 
                                age={this.props.age} 
                                city={this.props.city} />
                </HeroContainer>
              </Col>
            </Row>
          </Grid>
        );
    }
}

const HeroContainer = ({fadeIn, children}) => {
  return (
    <div className={classNames(s.textCenter, fadeIn ? s.fadeIn : s.hidden)}>
      {children}
    </div>
  );
};

const HeroImage = ({page}) => {
  const heroImg = require(`../../../images/hero${page}.jpg`);
  return (
    <img src={heroImg} className={s.heroImg} />
  );
};

const HeroTitle = ({onClick, selected, page}) => (
    <h1 onClick={onClick} className={selected ? s.blue : null}>{page}!</h1>
);

const HeroSubTitle = ({onClick, selected, name, age, city}) => (
    <p className={classNames(s.subTitle, s.textCenter, { [s.blue]: selected })} onClick={onClick}>
      {name}, {age}, {city}
    </p>
);

类GlobalHero扩展了React.Component{
状态={
法丹：没错，
标题：错误，
所选字幕：false
};
handleTitleClick=（）=>{
this.setState（{titleSelected:true}）；
};
handleSubTitleClick=（）=>{
this.setState（{subTitleSelected:true}）；
};
render（）{
返回(
);
}
}
常量容器=（{fadeIn，children}）=>{
返回(
{儿童}
);
};
常量图像=（{page}）=>{
const-herogramg=require（`../../../images/hero${page}.jpg`）；
返回(
);
};
常量HeroTitle=（{onClick，selected，page}）=>(
{page}！
);
const herostitle=（{onClick，selected，name，age，city}）=>(

{name}、{age}、{city}

);

像这样把它分解成更小的组件并不是完全必要的，但是请注意，从

GlobalHero

的角度来看，它对样式没有任何作用，它只是设置道具和状态，而小部分没有状态，它们只是基于道具渲染正确的样式

PS也许这应该转移到？

您的标题中提到了，但看起来您正在使用，它的灵感来自类似的想法，但不是相同的东西

无论如何，这是相当主观的，但我有一些想法太多，无法纳入评论：

• 假设您通过Webpack的

  css加载器

  使用css模块，那么您可以使用

  c