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

当父级状态更改时，我需要重新渲染子组件

在设置语言的父组件中 一旦语言发生变化，子级也将使用所选语言进行更新

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

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

import React，{Component}来自“React”；
从“/Child.js”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
这个州={
lblName:“名称”，
lblGender：“性别”，
lblDOB：“出生日期”，
lblNatio：“国籍”，
};
}
更改语言（lang，e）{
如果（lang==“en”）{
这是我的国家(
{
lblName:“名称”，
lblGender：“性别”，
lblDOB：“出生日期”，
lblNatio：“国籍”，
});
}
else if（lang==“sp”）{
这是我的国家(
{
lblName:“Nombre”，
lblGender：“Género”，
lblDOB：“Fecha de Naciminto”，
lblNatio:“民族主义”，
});
}
}
render（）{
返回(
英语
西班牙的
)}
}

传递给子组件并作为子组件生成的父状态

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

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

import React，{Component}来自“React”；
类父级扩展组件{
建造师（道具）{
超级（道具）；
this.state=this.props.ChildData；
}
组件将接收道具（下一步）{
这个.forceUpdate（）；
this.setState（nextrops.ChildData）；
}
render（）{
返回(
lblName
lblGender
lblDOB
伊尔纳蒂奥
)}
}

尝试使用这两种解决方案强制更新并设置状态。。。我失败了

---

我想在使用c语言时从父控件更新标签，只需将带有语言的道具添加到子控件中，并从父控件传递它们，当父控件执行此操作时，子控件总是重新渲染。。 将此代码用于您的项目

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

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

import React，{Component}来自“React”；
从“./Child”导入子项
类父级扩展组件{
建造师（道具）{
超级（道具）；
这个州={
lblName:“名称”，
lblGender：“性别”，
lblDOB：“出生日期”，
lblNatio：“国籍”，
};
}
更改语言（lang，e）{
如果（lang==“en”）{
这是我的国家(
{
lblName:“名称”，
lblGender：“性别”，
lblDOB：“出生日期”，
lblNatio：“国籍”，
});
}
else if（lang==“sp”）{
这是我的国家(
{
lblName:“Nombre”，
lblGender：“Género”，
lblDOB：“Fecha de Naciminto”，
语言：“民族主义”，
});
}
}
render（）{
返回(
英语
西班牙的
)}
}
导出默认父级

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

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

import React，{Component}来自“React”；
类子扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.lblName}
{this.props.lblGender}
{this.props.lblDOB}
{this.props.lblNation}
)}
}
导出默认子对象

示例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'))

import React，{Component}来自'React'；
从“react dom”导入react dom；
导入“./index.css”；
从“./Parent”导入父项
类应用程序扩展组件{
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））

目前，所有文件都在src文件夹中。在Parent.js中，您应该导入Child.js 2.）应在文件末尾导出子模块和父模块 3.）在onClick方法中应使用带撇号的“en”和“sp”

1.）Parent.js

import React，{Component}来自“React”；
从“./Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）；
此.state={
lblName:“名称”，
lblGender：“性别”，
lblDOB：“出生日期”，
lblNatio：“国籍”，
};
}
更改语言（lang，e）{
如果（lang==“en”）{
这是我的国家(
{
lblName:“名称”，
lblGender：“性别”，
lblDOB：“出生日期”，
lblNatio：“国籍”，
});
}
else if（lang==“sp”）{
这是我的国家(
{
lblName:“Nombre”，
lblGender：“Género”，
lblDOB：“Fecha de Naciminto”，
lblNatio:“民族主义”，
});
}
}
render（）{
返回(
英语
西班牙的
)
}
}
导出默认父对象

首先，不推荐在父组件中导入子组件

componentWillReceiveProps