Правильный способ передачи функций между удаленными компонентами

#reactjs

Вопрос:

В моем компоненте верхнего уровня у меня есть:

 <NavigationComponent />
<Router>
  <Switch>
    <Route component={SomeComponent} />
    ...
  </Switch>
</Router>

теперь у NavigationComponent вас есть delete значок, при нажатии на который должна вызываться функция. Я хочу, чтобы эта функция поступала из SomeComponent (или некоторых других компонентов с любого активного маршрута).

Я пытался включить все маршруты в контекст, но это кажется таким запутанным.

Другим вариантом было передать setDeleteCallback в SomeComponent , который (в componentDidMount ) установил бы обратный вызов, а затем передал это NavigationComponent через render props. Также кажется запутанным.

Есть ли какой-нибудь наилучший практический способ выполнить такого рода подключение?

ps. мне не нужно кодированное решение, просто идея.

1. Вам следует взглянуть на react-redux , он делает именно то, что вы хотите

2. @mthrsj я использую redux, но я не хочу, чтобы мое состояние redux содержало функции.

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

4. Нет, идея не в этом. NavigationComponent Выполняет действие, SomeComponent обнаруживает изменение с помощью componentDidUpdate и затем вызывает нужную функцию. Что вы думаете?

5. @mrhrsj как навигация узнает, какие данные действия включать, а какие удалять, чтобы удалить?

Ответ №1:

Как насчет этой идеи, извините, так как я хотел написать код, не поместил его в комментарии

 state={onDelete:()=>{}}

onDeleteHandler=func=>{this.setState({onDelete:func})}

   <NavigationComponent onDelete={this.state.onDelete}/>
    <Router>
      <Switch>
        <Route component={()=><SomeComponent onDeleteHandler={this.onDeleteHandler}/>} />
        ...
      </Switch>
    </Router>

теперь someComponent следует отправить желаемую функцию удаления обратно сюда, возможно, на componentDidMount и NavigationComponent на componentDidUpdate получит ее как заново prop

1. спасибо за ваш вклад! да, это один из вариантов, который я пробовал (с реквизитами для рендеринга, сложнее). пока я буду голосовать за, просто чтобы посмотреть, не придумает ли кто-нибудь еще чего-то, что мы упустили. если нет, я приму это.