Доступ к функции из другого компонента React - PullRequest
Новая
       6

Доступ к функции из другого компонента React

0 голосов
/ 06 ноября 2018

Я создал меню верхней панели, которому нужен доступ к компоненту реакции. Внутри файла topbar я не отображаю другие компоненты, но хотел бы получить доступ к функции внутри одного из компонентов, которые я использую.

Структура проекта выглядит следующим образом: 

Header Component
TopBar Component
LayoutWrapper Component <-- Here I render other components
  CustomerDetails Component <-- Here sits the functon I want to call.

Это файл TopBar: 

class AdminTopbar extends Component   {
  renderTopMenu() {

    ...

    if (currentPage.projects || currentPage.customers || currentPage.activities) {
        return(
            <nav>
                ...

                <li>
                    // Function needs to be called here
                    {menuPageType == null ? null : <button onClick={updateActivityCardDetails.bind(this)}>Archiveren</button>}

                </li>
            </nav>
        );          
    }`enter code here`
}
render() {
    return (
        <div className="topbar clear">

        ...

        </div>
    );
  }
}
export default withRouter(AdminTopbar);

Файл ActivityCardDetails, в котором находится функция: 

class ActivityCardDetails extends Component {
  constructor(props){
    super(props);

    // set page title
    document.title = 'Strippenkaarten overzicht';
  }

  updateActivityCardDetails() {

  }
}

Я нашел несколько сообщений о ссылках на родительский объект, но у меня нет вложенной структуры между этими файлами.

Напомним, что для компонентов TopBar, которые являются отдельными компонентами без каких-либо связей, я хотел бы вызвать метод updateActivityCard, который находится в компонентах ActvityCardDetails.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

React недавно (добавил контекстный API) https://reactjs.org/docs/context.html

Вероятно, лучше было бы вырвать функцию из компонента, потому что она используется различными компонентами, которые не имеют строго иерархической связи. Затем просто используйте контекст для доступа к нему из каждого компонента.

0 голосов
/ 06 ноября 2018

Вы можете попытаться обернуть всю структуру компонентом-оберткой и следовать инструкциям, приведенным в каждой строке ниже: 

Wrapper Component <-- Here place a state and a custom function that can set a callbackFunction to its state e.g. myFunc = (callback) => this.setState({updateFunction: callback}) 
  Header Component
  TopBar Component <-- Pass the Wrapper Component's state here through props, like state={this.state}
  LayoutWrapper Component <-- Pass the Wrapper Component's custom function here through props
    CustomerDetails Component <-- Pass the Wrapper Component's custom function here through its parent's props, and call it like 'this.props.myFunc(this.yourInnerUpdateFunction)' on DidMount

Как только вы закончите с этим, вы сможете вызывать updateFunction () из вашего компонента TopBar через 'this.props.state.updateFunction ()'

P.S. Это не идеальный подход, но он может выполнить работу, если ваше приложение не слишком тяжелое. Надеюсь, это поможет.

...