React 如何将状态传递给另一个组件

Posted 2023-02-23

【中文标题】React 如何将状态传递给另一个组件

【英文标题】：React how to pass an state to another component

【发布时间】：2017-11-07 04:23:42

【问题描述】：

您好，我拆分了我的应用程序并希望从我的<button /> 传递状态 到<menu /> 我只是想用onClick 切换一个功能。

因此，Button.js 文件将有 1 个按钮，单击时会将状态切换为可见或不可见。菜单组件 Menu.js 需要知道这些状态变化，以便他们可以切换功能并显示菜单

按钮组件

import React,  PureComponent  from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import  themr  from 'react-css-themr';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './NavButton.scss';


@themr('NavButton', localStyles)

export default class NavButton extends React.Component 

  constructor(props) 
    super(props);
    this.state = 
      visible: false,
    ;
    this.toggleMenu = this.toggleMenu.bind(this);
  

  toggleMenu() 
    this.setState(
      visible: !this.state.visible
    )
    console.log('toggle');
  

  render() 

    const theme  = this.props;
    return (
      <div className=theme['nav-button'] onClick=this.toggleMenu>
      <span></span>
      <span></span>
      </div>
    );
  

菜单

import React,  PureComponent  from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import  themr  from 'react-css-themr';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import localStyles from './Menu.scss';
import  NavButton  from '../../components';


@themr('Menu', localStyles)

export default class Menu extends React.Component 

  render() 

    return (

      <div className="menu-wrapper">
      <CSSTransitionGroup
        transitionName="menu"
        transitionEnterTimeout=300
        transitionLeaveTimeout=300>
        this.state.visible &&
        <Menus alignment="right">
          <MenuItem hash="first-page">First Page</MenuItem>
          <MenuItem hash="second-page">Second Page</MenuItem>
          <MenuItem hash="third-page">Third Page</MenuItem>
        </Menus>
        </CSSTransitionGroup>
      </div>
    );
  

const Menus = (alignment, children, theme ) => (
  <div className="menu">
  <div className=alignment>children</div>
  </div>
);

【问题讨论】：

你的 Menu.js 和 Button.js 一样

按钮和菜单如何连接在一起？你可以添加你的容器组件吗？您可以将状态保存在容器上的单个位置，将切换状态作为道具传递给菜单。

我正在将按钮组件导入到我的菜单中，并希望在单击按钮时更改 this.state.visible，我还更新了我的代码

【参考方案1】：

最好在最顶层的组件中维护应用程序的状态，这样它就可以控制应用程序的大脑。

如果您将状态移动到菜单中，您可以将 onClick 回调传递给按钮，例如

菜单.js

<NavButton toggleClick=this.handleClick />

然后你可以将State信息移到Menu以及handleClick函数中。

这允许 Button 是无状态的：

const NavButton = (theme, toggleClick) => (
    <div className=theme['nav-button'] onClick=toggleMenu>
        <span></span>
        <span></span>
    </div>
);

【参考方案2】：

虽然你已经将Button组件导入Menu，但你并没有使用它，你应该做的是保持菜单组件中visible的状态，并从Button组件与Menu通信

export default class Menu extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      visible: false,
    ;
    this.toggleMenu = this.toggleMenu.bind(this);
  
  toggleMenu() 
    this.setState(
      visible: !this.state.visible
    )
    console.log('toggle');
  
  render() 

    return (
      <NavButton toggleMenu=this.toggleMenu/>
      <div className="menu-wrapper">
      <CSSTransitionGroup
        transitionName="menu"
        transitionEnterTimeout=300
        transitionLeaveTimeout=300>
        this.state.visible &&
        <Menus alignment="right">
          <MenuItem hash="first-page">First Page</MenuItem>
          <MenuItem hash="second-page">Second Page</MenuItem>
          <MenuItem hash="third-page">Third Page</MenuItem>
        </Menus>
        </CSSTransitionGroup>
      </div>
    );
  

const Menus = (alignment, children, theme ) => (
  <div className="menu">
  <div className=alignment>children</div>
  </div>
);

现在你NavButton会喜欢

export default class NavButton extends React.Component 

  render() 

    const theme  = this.props;
    return (
      <div className=theme['nav-button'] onClick=this.props.toggleMenu>
      <span></span>
      <span></span>
      </div>
    );