在React JS中与样式堆叠 [英] Stack with style in react js

问题描述

反应有什么意义.我们有道具的readOnly角色，我无法对其进行编辑，而且我们也有状态无法从课外空间进行编辑?！

What is a point in react. We have props who's readOnly and i cant edit it and we have state also can't edit from out of class space ?!

我遵循教程...

如果我设置{this.state.myStyle}，则myStale变为只读?！

if i setup {this.state.myStyle} , myStale become's readonly ?!

这是全班学生:

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

    }

}

推荐答案

由于myStyle是冻结的"，因此您需要克隆对象，进行更改，然后使用setState将其写回.

Because myStyle is 'frozen', you need to clone the object, make changes and then write it back using setState.

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

In ES6 you can use a pattern like this:

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

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

}

这篇关于在React JS中与样式堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！