如何在ReactJS中从父组件强制更新子组件

Question

当父组件的状态改变时，我需要重新渲染子组件。

在父组件中设置语言，一旦语言更改，子组件也必须更新为所选的语言。

Parent.js

import React, { Component } from "react";
import Child from "./Child.js";

class Parent extends Component {
  constructor(props) {
    super(props);    
    this.state ={
        lblName: "Name",
        lblGender: "Gender",
        lblDOB: "Date Of Birth",
        lblNatio: "Nationality",
      };
  }
    ChangeLanguage(lang, e){
      if(lang === "en"){
           this.setState(
           {
              lblName: "Name",
              lblGender: "Gender",
              lblDOB: "Date Of Birth",
              lblNatio: "Nationality",
           });
      }
      else if(lang === "sp"){
           this.setState(
           {
              lblName: "Nombre",
              lblGender: "Género",
              lblDOB: "Fecha de nacimiento",
              lblNatio: "Nacionalidad",
           });
      }

    }
    render() {    
    return (
        <Child ChildData={this.state}>
        <button onClick = {this.ChangeLanguage.bind(this, en)}>English</button>
        <button onClick = {this.ChangeLanguage.bind(this, sp)}>Spanish</button>
    )}
}

将父状态传递给子组件并将其作为子组件

Child.js

import React, { Component } from "react";


class Parent extends Component {
  constructor(props) {
    super(props);    
    this.state = this.props.ChildData;
  }
    componentWillReceiveProps(nextProps){
        this.forceUpdate();
        this.setState(nextProps.ChildData);
    }

    render() {    
    return (
        <div>
             <div>
                  <label>lblName</label>
                  <input type="Text"></input>
             </div>
             <div>
                  <label>lblGender</label>
                  <input type="Text"></input>
             </div>
             <div>
                  <label>lblDOB</label>
                  <input type="Date"></input>
             </div>
             <div>
                  <label>lblNatio</label>
                  <input type="Text"></input>
             </div>
        </div>
    )}
}

尝试使用forceUpdate和setState这两种解决方案……但都失败了。我想在父组件中任何时候更新标签的语言。

- Nowshad Syed

---

首先在 Parent 组件中导入 Child。 - Dhaval Chheda

Answer 1

只需将语言属性添加到子控件中，并从父控件传递即可。

- Viktor Shyrokov

Answer 2

1.) 在你的Parent.js文件中，你应该导入Child.js 2.) 你应该在文件末尾导出Child和Parent模块 3.) 你应该在onClick方法中使用带有撇号的'en'和'sp'

1.) Parent.js

import React, {Component} from "react";
import Child from './Child';

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lblName: "Name",
            lblGender: "Gender",
            lblDOB: "Date Of Birth",
            lblNatio: "Nationality",
        };
    }

    ChangeLanguage(lang, e) {
        if (lang === "en") {
            this.setState(
                {
                    lblName: "Name",
                    lblGender: "Gender",
                    lblDOB: "Date Of Birth",
                    lblNatio: "Nationality",
                });
        }
        else if (lang === "sp") {
            this.setState(
                {
                    lblName: "Nombre",
                    lblGender: "Género",
                    lblDOB: "Fecha de nacimiento",
                    lblNatio: "Nacionalidad",
                });
        }

    }

    render() {
        return (
            <div>
                <Child ChildData={this.state}/>
                <button onClick={this.ChangeLanguage.bind(this, 'en')}>
                    English
                </button>
                <button onClick={this.ChangeLanguage.bind(this, 'sp')}>Spanish</button>
            </div>
        )
    }
}


export default Parent;

2. Child.js

import React, { Component } from "react";

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = this.props.ChildData;
    }
    componentWillReceiveProps(nextProps){
        this.forceUpdate();
        this.setState(nextProps.ChildData);
    }

    render() {
        return (
            <div>
                <div>
                    <label>{this.state.lblName}</label>
                    <input type="Text"></input>
                </div>
                <div>
                    <label>{this.state.lblGender}</label>
                    <input type="Text" ></input>
                </div>
                <div>
                    <label>{this.state.lblDOB}</label>
                    <input type="Date"></input>
                </div>
                <div>
                    <label>{this.state.lblNatio}</label>
                    <input type="Text"></input>
                </div>
            </div>
        )}
}

export default Child;

- ryy77

---

componentWillReceiveProps已被弃用。 - Majid Hojati

Answer 3

当父组件重新渲染时，子组件总是会重新渲染.. 在您的项目中使用此代码

Parent.js

import React, { Component } from "react";
import Child from './child'

class Parent extends Component {
  constructor(props) {
    super(props);    
    this.state ={
        lblName: "Name",
        lblGender: "Gender",
        lblDOB: "Date Of Birth",
        lblNatio: "Nationality",
      };
  }
    ChangeLanguage(lang, e){
      if(lang === "en"){
           this.setState(
           {
              lblName: "Name",
              lblGender: "Gender",
              lblDOB: "Date Of Birth",
              lblNatio: "Nationality",
           });
      }
      else if(lang === "sp"){
           this.setState(
           {
              lblName: "Nombre",
              lblGender: "Género",
              lblDOB: "Fecha de nacimiento",
              lblNation: "Nacionalidad",
           });
      }

    }
    render() {    
    return (
        <div>
            <Child {...this.state} />
            <button onClick = {this.ChangeLanguage.bind(this, "en")}>English</button>
            <button onClick = {this.ChangeLanguage.bind(this, "sp")}>Spanish</button>
        </div>
    )}
}

export default Parent

Child.js

import React, { Component } from "react";

class Child extends Component {
  constructor(props) {
    super(props);    
  }
    render() {    
        return (
            <div>
                    <div>
                        <label>{this.props.lblName}</label>
                        <input type="Text"></input>
                    </div>
                    <div>
                        <label>{this.props.lblGender}</label>
                        <input type="Text"></input>
                    </div>
                    <div>
                        <label>{this.props.lblDOB}</label>
                        <input type="Date"></input>
                    </div>
                    <div>
                        <label>{this.props.lblNation}</label>
                        <input type="Text"></input>
                    </div>
            </div>
        )}
}

export default Child

示例 index.js 文件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Parent from './parent'

class App extends Component {
    render() {
        return (
            <div className="App">
                <Parent />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'))

目前所有文件都在src文件夹中

- Dhaval Chheda