Reactjs 在react js中使用样式堆栈

反应的要点是什么。我们的道具是只读的，我不能编辑它，我们的状态也不能从课外空间编辑

我跟随教程

如果我设置了{this.state.myStyle}，myStyle就会变成只读的

这是全班同学：

import * as React from "react";
import { CSSProperties } from "react";
import * as ReactDOM from "react-dom";
import { Label } from "../../components/label/label";
import IApp from "../../interfaces/global-interfaces";
import Services from "../../services/services";
import { HeaderI, HeaderStateI } from "./header-interface";
// import { myStyle } from "./style";

enum myEventList {
   iNeedSomeUpdate = "i-need-some-update",
}

export class Header extends React.Component< HeaderI, HeaderStateI , any > {

  public myEvent = Services.CreateEvent(myEventList.iNeedSomeUpdate, {self: this} );
  public myRef: React.RefObject<HTMLDivElement>;
  public myDOM: Element | Text;

  private myStyle: IApp.MyMinimumCssInterface = {
    display: "block",
    background: "#559d96",
    height: "100px",
    textAlign: "center",
  };

    constructor(args: any) {
        super(args);

        this.state = { enabledComponent : true,
                       visibility: true,
                       debugView: false,
                       background: args.background,
                       elements: [],
                       // tslint:disable-next-line:object-literal-shorthand
                       myStyle: this.myStyle,
                    };

        // e.detail.data.self..background = this.state.background;

        this.myRef = React.createRef();
        this.add = this.add.bind(this);

    }

    // Override func
    public componentDidMount() {

      this.myDOM  = this.myRef.current;
      this.myDOM.addEventListener(myEventList.iNeedSomeUpdate, this.updateOnMyEvent);

    }

    public updateOnMyEvent(e: CustomEvent) {

      e.detail.data.self.printMe();
      console.log("My custom event is done!");
      e.detail.data.self.adapt();

    }

    public printMe() {
      console.log("Layout Header is active and update is on");
    }

    public render() {

        if ( this.state.debugView === false ) {

          return (
                <div ref={this.myRef} style={this.state.myStyle} onClick={this.TestEvent.bind(this)} >
                <Label name="headerName" text="i am header paragraph!" />
                {this.state.elements.map((i: any) => {
                  return <span key={i} >{i}</span>;
                })}
                </div>
              );

        } else {

            this.printMe();

            return (
                <div style={this.state.myStyle} ref={this.myRef} >
                <Label name="headerName" text="i am header paragraph!"/>
                {this.state.elements.map((i: any) => {
                   return <li key={i} >{i}</li>;
                })}
                </div>
            );

        }

    }

    public componentDidUpdate(prevProps: any) {

        // Typical usage (don't forget to compare props):
        console.warn("prevProps name is: " + prevProps.name);
        if (this.props.background !== prevProps.background) {
          this.printMe();
        } else {
            console.log("Background is same no update.");
        }

    }

    public add = (id: number, content: any, event: any ) => {

      let localArr: any[] = [];
      localArr = this.state.elements;
      localArr.push(React.createElement("div", { key: id , onClick : null }, content));

      this.setState(
        {
          elements: localArr,
          visibility : false,
        },
      );

      // tslint:disable-next-line:no-unused-expression
      console.log(" add from class in state elements,  visible is " , this.state.visibility );

    }

    public TestEvent(event: MouseEvent) {

      this.add( 1 , "fffff", null);
      this.add( 2 , "zzzzzz", null);

      this.myDOM.dispatchEvent(this.myEvent);

    }

    public adapt() {

      this.myStyle.background = "lime";

      this.setState({
        myStyle: this.myStyle,
      });

    }

}

import*as React from“React”；
从“react”导入{cssprroperties}；
从“react dom”导入*作为react dom；
从“../../components/Label/Label”导入{Label}；
从“../../interfaces/global interfaces”导入IApp；
从“../../Services/Services”导入服务；
从“/header接口”导入{HeaderI，HeaderStateI}”；
//从“/style”导入{myStyle}；
枚举myEventList{
iNeedSomeUpdate=“i-need-some-update”，
}
导出类标题扩展了React.Component{
public myEvent=Services.CreateEvent（myEventList.iNeedSomeUpdate，{self:this}）；
公共myRef:React.reobject；
公共myDOM：元素|文本；
private myStyle:IApp.MyMinimumCssInterface={
显示：“块”，
背景：“559d96”，
高度：“100px”，
textAlign：“居中”，
};
构造函数（参数：任意）{
超级（args）；
this.state={enabledComponent:true，
能见度：是的，
debugView:false，
背景：args.background，
要素：[]，
//tslint：禁用下一行：对象文字速记
我的风格：这个，我的风格，
};
//e.detail.data.self..background=this.state.background；
this.myRef=React.createRef（）；
this.add=this.add.bind（this）；
}
//覆盖函数
公共组件didmount（）{
this.myDOM=this.myRef.current；
this.myDOM.addEventListener（myEventList.iNeedSomeUpdate，this.updateOnMyEvent）；
}
公共更新MyEvent（e:CustomEvent）{
e、 detail.data.self.printMe（）；
log（“我的自定义事件完成了！”）；
e、 detail.data.self.adapt（）；
}
公共printMe（）{
log（“布局标题处于活动状态，更新处于打开状态”）；
}
公共渲染（）{
if（this.state.debugView==false）{
返回(
{this.state.elements.map（（i:any）=>{
返回{i}；
})}
);
}否则{
这是printMe（）；
返回(
{this.state.elements.map（（i:any）=>{
返回
{i}
；
})}
);
}
}
公共组件更新（prevProps:any）{
//典型用法（别忘了比较道具）：
console.warn（“prevProps名称为：“+prevProps.name”）；
if（this.props.background！==prevProps.background）{
这是printMe（）；
}否则{
log（“背景相同，无更新”）；
}
}
public add=（id:number，content:any，event:any）=>{
让localArr:any[]=[]；
localArr=this.state.elements；
localArr.push（React.createElement（“div”，{key:id，onClick:null}，content））；
这是我的国家(
{
元素：localArr，
可见性：错误，
},
);
//tslint:禁用下一行：无未使用的表达式
log（“从状态元素中的类添加，可见为”，this.state.visibility）；
}
公共TestEvent（事件：MouseeEvent）{
添加（1，“fffff”，null）；
添加（2，“zzzz”，空）；
this.myDOM.dispatchEvent（this.myEvent）；
}
公共适应（）{
this.myStyle.background=“lime”；
这是我的国家({
我的风格：这个，我的风格，
});
}
}

因为myStyle是“冻结”的，所以您需要克隆对象，进行更改，然后使用

setState

将其写回

在ES6中，您可以使用如下模式：

public adapt() {
  const {myStyle} = this.state
  let newMyStyle = {...myStyle}
  newMyStyle.background = "lime";

  this.setState({
    myStyle: newMyStyle,
  });

}

这里有一些管理方法，即

  const myStyle = Object.assign({}, this.state.myStyle, { background: "lime" })
  this.setState({ myStyle })

---

我修好了，从右边看什么都成了只读！我使用返回函数myStyle，但仍然需要在构造时没有连接的class属性。。。。对我来说很奇怪，我不知道任何类似的编程范例…我会试试！