组件通信 - React JS

Question

如何从类外或 prop.SomeFunction () 进行状态更改？ 我结合使用打字稿。是的，我已经上课了：

类：

import * as React from "react";
import { Label } from "../../components/label/label";
import { TextBox } from "../../components/textBox/textBox";
import IApp from "../../interfaces/global-interfaces";
import { myStyle } from "./style";

interface HeaderI {
    background: string;
    myFunc(): void;
    // elements: any[];
    // add(id: number, content: any, event: any): void;
}

interface HeaderStateI extends IApp.ElementI {
    background: string;
    elements: any[];
}

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

    public myRef: React.RefObject<Label>;

    constructor(args: any) {
        super(args);
        this.state = { enabledComponent : true,
                       visibility: true,
                       debugView: false,
                       background: args.background,
                       elements: [],
                    };

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

        console.log("state elements:" , this.state.elements);
    }

    public test() {
       alert("Y click on header element");
    }

    public printMe() {
      console.log("Layout Header is active :");
    }

    //  setText = (e: React.ChangeEvent) => {

      // this.setState ( { enabledComponent : true , background :  (e.target as HTMLInputElement).value } );

    // }

    public render() {

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

            return (
                <div style={myStyle} onClick={this.addN} >
                <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={myStyle} >
                <Label ref={this.myRef} 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 ) => {

        this.setState(
          {
            elements: [React.createElement("div", { key: 2 , onclick : null }, "tyest 12")],
            visibility : false,
          },
        );

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

    }

    public addN(event: MouseEvent | Event) {

        this.setState(
            {
              elements: [React.createElement("div", { key: 2 , onclick : null }, "tyest 12")],
              visibility : false,
            },
          );
        // tslint:disable-next-line:no-unused-expression
        console.log(" add from class in state elements,  visible is NNNN " , this.state.visibility );
    }

}

主文件：

const AddNewElement = Services.addNewElement;
const collectMe = <Header background="#127654"/>;

ReactDOM.render(
    <>
    {collectMe}
    <h3>Page title - inline text only example </h3>
     <Title name="title" text="Hello react title" />
     <Label name="root" text="I am text label component!"/> <br/>
     <TextBox name="root" text="I am textBox component!"/>
    </>,
    document.getElementById("root"),
);

//这个空间已经下课了，为什么我不能改变它？？？

collectMe.props.background = "#121212";
console.log(collectMe.props);

• react js 有很多问题。 在这篇文章中有一些方法，但仍然不适合我： https://www.javascriptstuff.com/component-communication/#2-instance-methods

但是示例太纯了，没有传递参数等... 它只是一个商业膨胀项目的反应。

Answer 1

道具是read-only。

无论你将组件声明为函数还是类，它都不能修改自己的 props。

你需要在这里做的是使用状态。要使用状态，您需要有基于类的组件。然后，您可以使用回调函数从子组件更新父组件状态。

看看这个post，从子组件更新父状态。