প্রতিক্রিয়াযুক্ত জেএস সন্তানের উপাদানগুলির প্যারেন্ট উপাদান থেকে পরিবর্তন করে change

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

আপনি প্যারেন্ট উপাদান থেকে সন্তানের উপাদানটির অবস্থা পরিবর্তন করতে ক্রিয়েফ ব্যবহার করতে পারেন। সমস্ত পদক্ষেপ এখানে।

সন্তানের উপাদানগুলিতে রাষ্ট্র পরিবর্তন করার জন্য একটি পদ্ধতি তৈরি করুন।

2 - React.createRef () ব্যবহার করে প্যারেন্ট উপাদানগুলিতে শিশু উপাদানটির জন্য একটি রেফারেন্স তৈরি করুন।

3 - রেফ = {} ব্যবহার করে সন্তানের উপাদানগুলির সাথে রেফারেন্স সংযুক্ত করুন}

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

আপনি পিতামাতার কাছ থেকে একটি প্রস্তাব প্রেরণ করতে পারেন এবং এটি শিশু উপাদানগুলিতে ব্যবহার করতে পারেন যাতে আপনি প্রেরিত প্রপ পরিবর্তনের উপর সন্তানের রাষ্ট্রীয় পরিবর্তনকে ভিত্তি করে তুলবেন এবং আপনি সন্তানের উপাদানটিতে getDeridedStateFromProp ব্যবহার করে এটি পরিচালনা করতে পারবেন ।