IT技术 - React js从父组件更改子组件的状态 - 吾爱随笔录

React js从父组件更改子组件的状态

IT技术 javascript reactjs

2021-03-13 01:12:26

我有两个组件：我想从中更改子组件状态的父组件：

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()？

6个回答

状态应该在父组件中管理。您可以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}/>
      );
    }
}

是的，这基本上就是 react-classnames 包所做的，但它也允许您始终应用一组类名，并有条件地应用其他类名。像这样： classNames({ foo: true, bar: this.props.open });// => 'foo' when this.props.open = false 和 'foo bar' 当 this.props.open = true 。

2021-04-29 01:12:26

我不明白，只要在声明ChildComponent->时指定此属性，就可以在子组件中的任何位置调用它<ChildComponent toggle={this.toggleChildMenu.bind(this)} />

2021-04-29 01:12:26

我们如何更改子组件中的打开状态？

2021-05-04 01:12:26

您可以toggle向 ChildComponent添加属性<ChildComponent open={this.state.open} toggle={this.toggleChildMenu.bind(this)} />并调用this.props.toggle()子组件

2021-05-13 01:12:26

通过这种方式，整个父组件都被重新渲染，从而降低了效率。你能告诉我只有子组件会更新它的状态或道具（意味着重新渲染）而不重新渲染父组件的任何方式。

2021-05-14 01:12:26

父组件可以管理将 prop 传递给子组件的子状态，子组件使用 componentWillReceiveProps 将这个 prop 转换为 state。

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

在这种情况下，子组件内部的 toggleMenu() 状态更改将如何到达父组件？想象一下，我关闭了抽屉，父组件如何知道它已关闭？

2021-04-19 01:12:26

@FadiAboMsalam 我正在使用 React 版本 16.7.0 和 @Types/react 版本 16.7.18。至少在 TypeScript 方面似乎没有getDerivedStateFromProps(). 然而，米格尔的回答建议使用componentWillReceiveProps(props)是可用的，并且在我的环境中就像一个魅力。

2021-05-08 01:12:26

在反应 16 中使用 getDerivedStateFromProps

2021-05-15 01:12:26

上面的答案对我来说部分正确，但在我的场景中，我想将该值设置为一个状态，因为我已使用该值来显示/切换模态。所以我使用如下。希望它会帮助某人。

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

这实际上是 react 中一种不鼓励的模式，因为它颠倒了信息流。如果 react 有一个 zen ，它就是data down ， actions up。这是使 React 应用程序如此易于推理的概念。命令句柄可能很有用，但应谨慎使用并深思熟虑。它们不应成为例如切换可见性的首选解决方案。

2021-04-28 01:12:26

这就是我想要的，但我想知道为什么不直接使用 react refs？看文档

2021-05-08 01:12:26

onRef 道具有什么作用？

2021-05-12 01:12:26

您可以使用createRef来从父组件更改子组件的状态。这是所有步骤。

创建一个方法来更改子组件中的状态。
使用为父组件中的子组件创建引用React.createRef()。
使用附加对子组件的引用ref={}。
使用调用子组件方法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}/>
    );
  }
}

这是我找到的最好的答案，因为它不会重新渲染父组件。这是更快，更好的做法！

2021-04-24 01:12:26

在父级上，我必须使用处理程序方法而不是直接调用子级。然后它起作用了。

2021-05-11 01:12:26

是的，这实际上也是满足我需求的最佳答案。这很干净，我们应该赞成这个答案。

2021-05-14 01:12:26

您可以从父组件发送一个 prop 并在子组件中使用它，以便您将子组件的状态更改基于发送的 prop 更改，并且您可以通过在子组件中使用getDerivedStateFromProps来处理此问题。

其它你可能感兴趣的问题

上一篇如何全局替换 JavaScript 字符串中的正斜杠？下一篇jQuery .val 更改不会更改输入值