如何在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并设置状态......我失败了 我希望在语言c

时更新来自父项的标签

Answer 1

只需将带有语言的道具添加到子控件中并从父

传递它们

Answer 2

当父母做的时候，孩子总是重新渲染.. 将此代码用于您的项目

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文件夹中

Answer 3

1。）在您的Parent.js中，您应该导入Child.js 2.）您应该在文件末尾导出Child和Parent模块 3.）你应该使用＆＃39; en＆＃39;和＆＃39; sp＆＃39;在onClick方法中使用撇号

1。）Parent.js

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

＆＃13;

1. Child.js
＆＃13;
＆＃13;
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;
＆＃13;
＆＃13;
＆＃13;