Стек со стилем в реакции JS

Question

Какой смысл реагировать. У нас есть реквизиты, которые доступны только для чтения, и я не могу их редактировать, и у нас есть состояние, которое также нельзя редактировать из внеклассного пространства?!

Я следую инструкциям ...

если я настрою {this.state.myStyle}, myStale станет доступным только для чтения?!

Вот целый класс:

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,
      });

    }

}

Answer 1

Есть несколько способов , как управлять этим, т.е.

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

Answer 2

Поскольку myStyle «заморожен», вам необходимо клонировать объект, внести изменения, а затем записать его обратно, используя setState.

В ES6 вы можете использовать такой шаблон:

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

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

}