如何从类外部或从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);
但是例子太纯粹了，没有args传递等...它只是一个商业膨胀项目的反应。