Trung tâm cá nhân
sách gpt4 ai đã đi

reactjs - 更改不同组件的状态 - ReactJS

In lại 作者：行者123 更新时间：2023-12-03 13:37:25 32 4
mua khóa gpt4 Nike

我正在尝试使用 React 构建一个简单的应用程序，它有两个组件，一个嵌入另一个组件。子组件是一个收缩的菜单，单击它时，它会展开。我希望能够在单击父元素或子元素失去焦点时重新收缩它。

这是父组件的样子:

import React từ 'react';
import MenuBar from './_components/MenuBar.js';

var div = React.createFactory('div');
var menu = React.createFactory(MenuBar);

var HomeComponent = React.createClass({
    render: function() {
        return div({ className: 'page home current', onClick: changeChildState //change the state of the child component to false },
            menu()
        )
    }
});



export default HomeComponent;

这就是子组件的样子:

import React từ 'react';

var div = React.createFactory('div');

var MenuBar = React.createClass({
    getInitialState: function() {
        return ({menuIsShowing: false});
    }
    showMenu: function() {
        return this.setState({menuIsShowing: true});
    },
    render: function() {
        var isShowing = this.state.menuIsShowing ? 'menuSlideDown' : '';
        return div({ className: 'menu-bar ' + isShowing, onClick: this.showMenu });
    }
});

export default MenuBar;

我不确定在 React 中执行此操作的正确方法，并且希望得到一些输入。

1 Câu trả lời

实现目标的一种方法是将 ChildComponent 展开状态保持在父组件状态中。通过 props 将 isExpand bool 值传递给子组件。同时，还向 ChildComponent 传递回调以更新父组件的 isExpand 状态。

var HomeComponent = React.createClass({
  getInitialState: function() {
    return ({menuIsShowing: false});
  },

  changeChildOpenStatus: function() {
    this.setState({menuIsShowing: true});
  },

  render: function() {
    return div({ className: 'page home current', onClick: this.changeChildOpenStatus },
      menu({ menuIsShowing: this.state.menuIsShowing, handleChildClicked: this.changeChildOpenStatus })
    )
  }
});

然后在子组件中

var MenuBar = React.createClass({
  handleExpandClicked: function(event) {
    this.props.handleChildClicked(event);
  },

  render: function() {
    var isShowing = this.props.menuIsShowing;
    return div({ className: 'menu-bar ' + isShowing, onClick: this.handleExpandClicked });
  }

});

关于reactjs - 更改不同组件的状态 - ReactJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29241871/

32 4 0
Bài viết được đề xuất: reactjs - 使用 Jest 测试 React 元素高度
Bài viết được đề xuất: wireshark - 有哪些好的 Wireshark 教程？
Bài viết được đề xuất: javascript - 通过浏览器以编程方式确定 DPI？
Bài viết được đề xuất: ajax - 在 setState() 回调中发出 AJAX 请求
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com