रिएक्ट जेएस बच्चे के घटक की स्थिति को मूल घटक से बदलते हैं

Question 1

मेरे पास दो घटक हैं: मूल घटक जिसमें से मैं बच्चे के घटक की स्थिति बदलना चाहता हूं:

class ParentComponent extends Component {
  toggleChildMenu() {
    ?????????
  }
  render() {
    return (
      <div>
        <button onClick={toggleChildMenu.bind(this)}>
          Toggle Menu from Parent
        </button>
        <ChildComponent />
      </div>
    );
  }
}

और बाल घटक :

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

मुझे पेरेंट कंपोनेंट से चाइल्ड कंपोनेंट के ओपन स्टेट को बदलने की जरूरत है , या पेरेंट कंपोनेंट के बटन पर क्लिक करने पर पेरेंट कंपोनेंट से चाइल्ड कंपोनेंट का टॉगलमेनू () कॉल करना होगा ?

Question 2

राज्य को मूल घटक में प्रबंधित किया जाना चाहिए। आप openएक संपत्ति जोड़कर मूल्य को बाल घटक में स्थानांतरित कर सकते हैं।

class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false
      };

      this.toggleChildMenu = this.toggleChildMenu.bind(this);
   }

   toggleChildMenu() {
      this.setState(state => ({
        open: !state.open
      }));
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}

Question 3

मूल घटक बच्चे के लिए एक प्रॉप पास करने वाले बच्चे की स्थिति का प्रबंधन कर सकता है और बच्चा इस प्रोप को कंपोनेंट रीसिविवप्रॉप्स का उपयोग करके राज्य में परिवर्तित कर सकता है।

class ParentComponent extends Component {
  state = { drawerOpen: false }
  toggleChildMenu = () => {
    this.setState({ drawerOpen: !this.state.drawerOpen })
  }
  render() {
    return (
      <div>
        <button onClick={this.toggleChildMenu}>Toggle Menu from Parent</button>
        <ChildComponent drawerOpen={this.state.drawerOpen} />
      </div>
    )
  }
}

class ChildComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }
  }

  componentWillReceiveProps(props) {
    this.setState({ open: props.drawerOpen })
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    })
  }

  render() {
    return <Drawer open={this.state.open} />
  }
}

Question 4

उपरोक्त उत्तर मेरे लिए आंशिक रूप से सही है, लेकिन मेरे परिदृश्य में, मैं एक राज्य के लिए मूल्य निर्धारित करना चाहता हूं, क्योंकि मैंने एक मोडल दिखाने / टॉगल करने के लिए मूल्य का उपयोग किया है। इसलिए मैंने नीचे की तरह उपयोग किया है। आशा है कि यह किसी की मदद करेगा।

class Child extends React.Component {
  state = {
    visible:false
  };

  handleCancel = (e) => {
      e.preventDefault();
      this.setState({ visible: false });
  };

  componentDidMount() {
    this.props.onRef(this)
  }

  componentWillUnmount() {
    this.props.onRef(undefined)
  }

  method() {
    this.setState({ visible: true });
  }

  render() {
    return (<Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}>
      {"Content"}
    </Modal>)
  }
}

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  }
  render() {
    return (
      <div>
        <Child onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}

संदर्भ - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542

Question 5

आप मूल घटक से चाइल्ड घटक की स्थिति को बदलने के लिए createRef का उपयोग कर सकते हैं। यहाँ सभी चरण हैं।

बच्चे के घटक में राज्य को बदलने के लिए एक विधि बनाएं।

2 - React.createRef () का उपयोग करके मूल घटक में बच्चे के घटक के लिए एक संदर्भ बनाएँ।

3 - Ref = {} का उपयोग करके बच्चे के घटक के साथ संदर्भ संलग्न करें।

4 - चाइल्ड कम्पोनेंट मेथड को इस का उपयोग करके कॉल करें।

जनक घटक


class ParentComponent extends Component {
constructor()
{
this.changeChild=React.createRef()
}
  render() {
    return (
      <div>
        <button onClick={this.changeChild.current.toggleMenu()}>
          Toggle Menu from Parent
        </button>
        <ChildComponent ref={this.changeChild} />
      </div>
    );
  }
}

बाल घटक


class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu=() => {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <Drawer open={this.state.open}/>
    );
  }
}

Question 6

आप माता-पिता से एक प्रस्ताव भेज सकते हैं और इसे बच्चे के घटक में उपयोग कर सकते हैं ताकि आप भेजे गए प्रोप परिवर्तनों पर बच्चे के राज्य परिवर्तनों को आधार बनाएंगे और आप बच्चे के घटक में getDerivedStateFromProps का उपयोग करके इसे संभाल सकते हैं।