Как получить доступ к методам из одного компонента в другом компоненте вact.js?

Question

У меня есть классы navigation и drawer в моих компонентах (в разных файлах).Я хочу иметь возможность иметь кнопку меню в классе navigation, которая открывает и закрывает ящик.У меня есть метод toggleStatus в классе drawer, который изменяет состояние drawerStatus на открытое / закрытое.Как получить доступ к методу toggleStatus из класса navigation?Я использую материал-дизайн для всех своих компонентов.

Answer 1

Вы можете передать его в качестве реквизита.

IE. У меня есть Heirarchy:

<Foo>
<Bar/>
</Foo>

, а внутри foo есть функция toggle.

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

Вы можете передать переключатель в Bar как реквизит, подобный этому:

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

, а внутри компонента bar вы можете использовать toggleInBar в качестве реквизита.

this.props.toggleInBar 

запустит ведение журнала:)

PSЯ намеренно сделал другое имя, чтобы легче было различать функции:)

Answer 2

Я бы поступил так: 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;

Answer 3

Если компоненты navigation и drawer являются дочерними для родительского компонента, объявите метод, который обновляет drawerStatus и передайте его как prop в navigation, добавьте состояние этому родительскому компоненту и передайте его как prop в 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>
    );
  }
}