代码之家 › 专栏 › 技术社区 › vighnesh153

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

reactjs javascript

vighnesh153 · 技术社区 · 6 年前

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

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

以下是我尝试的:

class Numbers extends Component {
    static num = Math.random();

    static changeNumber() {
        num = Math.random();
    }

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

然后,我使用这个组件如下:

let component = (
    <div>
        <Numbers />
        <Numbers />
        <Numbers />
    </div>
);

ReactDOM.render(component, document.getElementById('something'));

但是当我点击任何一个按钮时,只有它的内容改变了。其他按钮仍保留旧号码。如果静态变量发生更改,如何使React重新呈现所有组件的实例?

0 回复 | 直到 6 年前

Ivan Burnaev 5 年前

你误解了 properties <Component /> 变成 createElement(Component, props, children) . 这里是 props

道具来自父组件。要使组件自己重新加载,应该使用 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>
        );
    }
}

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

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>
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前