[javascript] React js는 부모 구성 요소에서 자식 구성 요소의 상태를 변경합니다.

Program / 글쓴이

두 가지 구성 요소
가 있습니다. 자식 구성 요소의 상태를 변경하려는 부모 구성 요소 :

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

부모 구성 요소에서 자식 구성 요소의 열린 상태를 변경 하거나 부모 구성 요소의 버튼을 클릭하면 부모 구성 요소에서 자식 구성 요소의 toggleMenu () 를 호출 해야합니까?

답변

상태는 상위 구성 요소에서 관리되어야합니다. 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}/>
      );
    }
}

답변

부모 구성 요소는 자식에게 소품을 전달하는 자식 상태를 관리 할 수 ​​있으며 자식은 componentWillReceiveProps를 사용하여이 소품을 상태로 변환합니다.

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

답변

위의 대답은 부분적으로 나에게 맞지만 내 시나리오에서는 값을 사용하여 모달을 표시 / 토글했기 때문에 값을 상태로 설정하고 싶습니다. 그래서 아래와 같이 사용했습니다. 누군가를 도울 수 있기를 바랍니다.

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

답변

createRef를 사용하여 부모 구성 요소에서 자식 구성 요소의 상태를 변경할 수 있습니다. 다음은 모든 단계입니다.

  1. 하위 구성 요소의 상태를 변경하는 메서드를 만듭니다.

    2-React.createRef ()를 사용하여 부모 구성 요소의 자식 구성 요소에 대한 참조를 만듭니다.

    3-ref = {}를 사용하여 하위 구성 요소에 참조를 첨부합니다.

    4-this.yor-reference.current.method를 사용하여 하위 구성 요소 메서드를 호출합니다.

부모 구성 요소


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

답변

부모로부터 소품을 보내고 자식 구성 요소에서 사용할 수 있으므로 보낸 소품 변경 사항에 자식의 상태 변경을 기반 으로하고 자식 구성 요소에서 getDerivedStateFromProps 를 사용하여이를 처리 할 수 ​​있습니다 .

답변