React：Css module：自动生成className

change configuration

npm run eject

得到config文件并可修改；

进入webpack.config.dev.js

在css options中增加

modules:true
localIdentName:'[name]__[local]__[hash:base64:5]'

module可为css自动创建不重复的class；

最新的react无需手动修改

将css文件命名为 name.module.css即可；

App.js

import React, {
    Component } from 'react';
import Cssclasses from './App.module.css';
import Person from './Person/person';


class App extends Component{
   
  state={
   
    persons:[
      {
   id:'asfa1', name:'Max' , age:28},
      {
   id:'asfa2', name:'manu' , age:24},
      {
   id:'asfa3', name:'Snie' , age:26}
    ],
    isshow:false
  };

  clicktoshow =(event)=>{
   
    const tmp = this.state.isshow;
    this.setState({
   isshow:!tmp});
  }

  deletePersonHandler=(personIndex)=>{
   
    // const persons = this.state.persons.slice();  //返回一个copy
    const persons = [...this.state.persons];  //内容复制
    persons.splice(personIndex,1);
    this.setState({
   persons:persons});
  }


  nameChangedHandler = (event,id)=>{
   
    const personIndex = this.state.persons.findIndex(p=>p.id===id);
    const person = {
   
      ...this.state.persons[personIndex]
    };
    person.name=event.target.value;
    const persons=[...this.state.persons];
    persons[personIndex]=person;
    this.setState({
   persons:persons});
  }

  render(){
   
  let person=null;
  let btnClass=[Cssclasses