Передача реквизита от родителя брату в React

Question

Я воссоздаю простое приложение React, которое я уже создал в Angular. Приложение React состоит из двух компонентов: один (меню. js) для бокового меню и второй (контент. js), который будет отображать содержимое каждого элемента в меню при нажатии каждой ссылки (как в iframe). своего рода). В приложении. js я делаю вызов REST API, чтобы заполнить состояние для компонента меню. js. Обратите внимание, что оба компонента находятся в Приложении. js следующим образом:

Приложение. js

import React,{Component} from 'react';
import Menus from './components/menus';
import Content from './components/content';

class App extends Component {

  state = {
    menus: []
  }

  componentDidMount(){
    fetch('api address')
    .then(res => res.json())
    .then((data)=> {
      this.setState({menus: data})
    })
    .catch(console.log)
  }

  render(){
  return (
    <div>
      <div><Menus menus={this.state.menus} /></div>
      <div><Content /></div>
    </div>
  );
}
}

export default App;

, вот меню. js компонент; он берет реквизит (меню) из приложения. js и строит ссылки меню с элементами из него:

import React from 'react';
import { BrowserRouter as Router, Link,} from "react-router-dom";
  const Menus = ({ menus }) => {
    return (
      <Router>
        <div>
          <center><h1>Lessons</h1></center>
          {menus.map(menu => (
            <li key={menu.lesson}>
              <Link to={`/lesson/${menu.lesson}`}>{menu.lessonName}</Link>
            </li>
          ))}
        </div>
      </Router>
    );
  };
  export default Menus;

Вот что мне нужно - как передать элементы из тот же реквизит (из приложения. js) для компонента контента? К вашему сведению - мне нужно, чтобы это происходило каждый раз, когда нажимается ссылка в меню в меню. js (именно поэтому в списке используется ключ ). Простая идея заключается в том, что содержимое будет обновляться в компоненте содержимого каждый раз, когда Ссылка меню в компоненте меню нажата.

**content.js**

import React from 'react'

const Content = () => {
  return (
    <div>{menu.content}</div>
  )
};

export default Content

Answer 1

Исходя из вашего описания проблемы и того, что я вижу из того, что вы написали, мне кажется, что вы пытаетесь создать приложение, в котором сохраняется меню, но содержимое меняется в зависимости от щелчков меню. Для простого приложения я бы по-другому структурировал его.

<ParentmostComponent>
  <MenuComponent someProp={this.state.some_data} />
      <Switch>
        <Route path={"/path"} render={(props) => <Dashboard {...props} someProp={this.state.some_other_data_from_parents} />
      </Switch>
</ParentMostComponent>

Это позволило бы меню всегда оставаться там, независимо от того, что делает контент, и вам также не нужно будет передавать Подставка меню для двух компонентов.

Answer 2

В вашем примере используется React Router , поэтому этот ответ также использует его.

Прежде всего, переместите Router вверх по иерархии с Menus до App, чтобы сделайте реквизиты маршрутизатора доступными для всех компонентов. Затем оберните ваш Content внутри Route, чтобы сделать его условно (то есть, если путь соответствует "/lesson/:lesson"):

class App extends Component {
  state = {
    menus: [
      {
        lesson: '61355373',
        lessonName: 'Passing props from parent to sibling in React',
        content: 'I am recreating a simple React app…'
      },
      {
        lesson: '27991366',
        lessonName: 'What is the difference between state and props in React?',
        content: 'I was watching a Pluralsight course on React…'
      }
    ]
  }

  render() {
    const { menus } = this.state

    return (
      <Router>
        <div>
          <div><Menus menus={menus}/></div>
          <Route path="/lesson/:lesson" render={({ match }) => (
            <div><Content menu={menus.find(menu => menu.lesson === match.params.lesson)}/></div>
          )}>
          </Route>
        </div>
      </Router>
    )
  }
}

С помощью render prop вы можете получить доступ к реквизитам маршрутизатора (в данном случае match.params.lesson) перед рендерингом вашего дочернего компонента. Мы используем их для передачи выбранного меню на Content. Готово!

Примечание. Техника basi c (без React Router , Redux et c.) Для передачи реквизита между братьями и сестрами составляет поднимите состояние .

Answer 3

В вашем menu.js, прикрепите объект menu к Link

...
{menus.map(menu => (
    <li key={menu.lesson}>
        <Link to={{
          pathname: `/lesson/${menu.lesson}`,
          state: menu
        }}> {menu.lessonName} </Link> 
    </li>
))}
...

В вашем content.js получите menu, например:

import React from 'react'

const Content = () => {
  console.log(props.location.state.menu.content);
  return (
    <div>{props.location.state && props.location.state.menu.content }</div>
  )
};

export default Content

Подробнее здесь