Javascript 修改组件的静态属性不会'；t在React中重新呈现其所有实例

我刚刚开始学习ReactJS，遇到了“修改组件属性”。它说，每当我们修改属性时，它都会调用“render”方法来显示这些更改。这很好

然后我想如果我使组件的属性是静态的，那么如果我更新它，它应该重新呈现该组件的所有实例。但事实并非如此

以下是我尝试过的：

类号扩展组件{
static num=Math.random（）；
静态changeNumber（）{
num=Math.random（）；
}
render（）{
返回(
Numbers.num
);
}
}

然后，我使用了这个组件，如下所示：

let组件=(
);
render（组件，document.getElementById（'something'）；

---

但当我点击任何按钮时，只有它的内容改变了。其他按钮仍保留旧编号。如果静态变量发生变化，我如何做出反应以重新呈现所有组件的实例？

您误解了

属性的含义。它们不是类的属性（一般意义上）。你可以把它们看作函数变量。每个React组件都被传输到函数调用<代码>

变成

createElement（组件、道具、子项）

。这是你要找的

道具

道具来自父组件。要使组件自行重新加载，应使用

state

。因此，您的示例变成：

class Numbers extends Component {
    state = {num: Math.random()}

    changeNumber = () => {
        this.setState({num: Math.random()});
    }

    render() {
        return (
            <button onClick={ this.changeNumber }>{this.state.num}</button>
        );
    }
}

类号扩展组件{
state={num:Math.random（）}
changeNumber=（）=>{
this.setState（{num:Math.random（）}）；
}
render（）{
返回(
{this.state.num}
);
}
}

如果要更新所有子组件，应向父组件添加状态

class Component extends Component {
    state = {num: Math.random()}

    changeNumber = () => {
        this.setState({num: Math.random()});
    }

    render() {
        return (
            <Numbers onClick={ this.changeNumber }>{this.state.num}</Numbers>
        );
    }
}

function Numbers (props) {
  return <div onClick={props.onClick}>{props.children}</div>
}

类组件扩展组件{
state={num:Math.random（）}
changeNumber=（）=>{
this.setState（{num:Math.random（）}）；
}
render（）{
返回(
{this.state.num}
);
}
}
功能编号（道具）{
返回{props.children}
}

您误解了

属性的含义。它们不是类的属性（一般意义上）。你可以把它们看作函数变量。每个React组件都被传输到函数调用<代码>

变成

createElement（组件、道具、子项）

。这是你要找的

道具

道具来自父组件。要使组件自行重新加载，应使用

state

。因此，您的示例变成：

class Numbers extends Component {
    state = {num: Math.random()}

    changeNumber = () => {
        this.setState({num: Math.random()});
    }

    render() {
        return (
            <button onClick={ this.changeNumber }>{this.state.num}</button>
        );
    }
}

类号扩展组件{
state={num:Math.random（）}
changeNumber=（）=>{
this.setState（{num:Math.random（）}）；
}
render（）{
返回(
{this.state.num}
);
}
}

如果要更新所有子组件，应向父组件添加状态

class Component extends Component {
    state = {num: Math.random()}

    changeNumber = () => {
        this.setState({num: Math.random()});
    }

    render() {
        return (
            <Numbers onClick={ this.changeNumber }>{this.state.num}</Numbers>
        );
    }
}

function Numbers (props) {
  return <div onClick={props.onClick}>{props.children}</div>
}

类组件扩展组件{
state={num:Math.random（）}
changeNumber=（）=>{
this.setState（{num:Math.random（）}）；
}
render（）{
返回(
{this.state.num}
);
}
}
功能编号（道具）{
返回{props.children}
}

我怀疑这个例子是否有效。你能为此提供代码笔吗？对实例变量更改不进行反应。你应该使用state。我怀疑这个例子是否有效。你能为此提供代码笔吗？对实例变量更改不进行反应。您应该使用state。