Question

我的组件中有一个navigation和一个drawer类（在不同的文件中）。我希望能够在navigation类中具有一个菜单按钮，该按钮可以打开和关闭抽屉。我在toggleStatus类中有一个drawer方法，它将drawerStatus的状态更改为打开/关闭。如何从toggleStatus类中访问navigation方法？我正在为所有组件使用材料设计。

Answer 1

如果navigation和drawer组件是父组件的子组件，则声明一个方法来更新drawerStatus并将其作为prop传递给navigation并向该父组件添加状态组件并将其作为道具传递给drawer。就像这样：

class ParentComponent extends Component {
  constructor() {
    this.state = { isDrawerOpen: false };
  }

  toggleDrawer = () => {
    this.setState({ isDrawerOpen: !this.state.isDrawerOpen });
  }

  render() {
    return (
      <div>
        <NavigationComponent toggleDrawer={this.toggleDrawer} />
        <DrawerComponent drawerStatus={this.props.isDrawerOpen} />
      </div>
    );
  }
}

Answer 2

您可以将其作为道具传递。

I.E。我有这个继承体系：

<Foo>
<Bar/>
</Foo>

在foo内部，您有一个名为toggle的函数。

toggle(){
    console.log('triggered')
}

您可以将切换作为道具传递给Bar：

<Bar
    toggleInBar={this.toggle.bind(this)}
/>

和内部bar组件中，可以将toggleInBar用作道具。

this.props.toggleInBar

将触发日志记录：）

P.S。
我故意用不同的名字来区分功能：）

Answer 3

我会这样处理： 1-您的按钮类可能看起来像这样：

import React from 'react'; // import react module
import PropTypes from 'prop-types'; // ES6
const Button = (props) => {
  return (
    <input
      type="button"
      onClick={props.handleClick}
      value={props.label}
    />
  );
}

// describe our expected props types
Button.propTypes = {
  type: PropTypes.string.isRequired,
  handleClick: PropTypes.func.isRequired,
  label: PropTypes.string.isRequired
}

// export our button component.
export default Button;

您的父组件可能是这样的：

import React from 'react'; // import react module
import Button from './button'; // Import our button component from this directory
// create a class which extends react component
class Frame extends React.Component {

  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  // our method to handle all click events from our buttons
  handleClick(event){
    const value = event.target.value; // get the value from the target element (button)
    switch (value) {
      case '1': {
         //handler for tia button with lable "1"
        break;
      }
      default: {
        // your default implementation 
        break;
      }
    }
  }

  // Render function to creat component to be rendered on the DOM.
  // This method must return a single parent element as you can see here. 
  // The component is wrapped around () to make it a single expression.
  render() {
    return (
      <div className="frame">
          <Button className='btn-primary' label={'1'} handleClick={this.handleClick} type='input' />
    );
  }
}

// export our frame component. To be used in our client/index.js file
export default Frame;

如何从react.js中不同组件的一个组件访问方法？

3 个答案: