ReactJs получить доступ к «состоянию» из класса?

Question

У меня есть один файл "Aboutmenu.js"

export default class MenuExampleVerticalDropdown extends Component {
  state = { activeItem: ''}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

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

    return (
      <Menu secondary vertical>
        <Link to='/about'> <Menu.Item 
          name='General Information'
          active={activeItem === 'General Information'}
          onClick={this.handleItemClick}
        /></Link>
        <Link to='/about/history'><Menu.Item
          name='History'
          active={activeItem === 'History'}
          onClick={this.handleItemClick}
        /></Link>
        <Link to="/"><Menu.Item
          name='Prize Distribution'
          active={activeItem === 'Prize Distribution'}
          onClick={this.handleItemClick}
        /></Link>
        
      </Menu>
    )
  }
}

Я импортирую его на мою страницу о нас, а также импортирую в aboutus / history; ABOUTUS / распределение

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Container, Divider } from 'semantic-ui-react'
import MenuExampleVerticalDropdown from './AboutMenu'
const About = () => (
    <Layout>
    <div> 
        <h1>  About Us</h1>
        <hr />
    <MenuExampleVerticalDropdown style={{float:'left'}}/>
    <Container textAlign='left'>
      <b>General Information</b>
      <Divider />
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
        consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
        pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
        Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend
        ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
        nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
        augue. Curabitur ullamcorper ultricies nisi.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
        consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu
        pede link mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
        Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend
        ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
        nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
        augue. Curabitur ullamcorper ultricies nisi.
      </p>
    </Container>
  </div>
    </Layout>
  )
    export default About;

Как мне сделать так, чтобы он автоматически отображался на каждой странице, к которой у меня есть доступ? Например, когда я добираюсь до aboutus / history, это выглядит как на второй картинке. Пока я могу это сделать, только нажав на кнопку :( Изображение 1 Изображение 2

Обычно я пытался перейти на каждую страницу (aboutus, aboutus / history, aboutus / distribution), и моя идея состояла в том, чтобы импортировать MenuExampleVerticalDropdown из aboutmenu.js (первый фрагмент кода). Я не нахожу никакой документации или какого-либо связанного содержания, чтобы получить доступ к состоянию.

Одна вещь, которую я заметил: если вы измените строку Aboutmenu.js 2 на

state = { activeItem: 'General Information'}

это очевидно показывает «Общая информация» на всех страницах, как на рисунке 1

Answer 1

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

Чтобы взаимодействовать с компонентами, вам необходимо выполнить « триангуляцию », используя родительский компонент в качестве моста связи, здесь есть действительно хорошее руководство о том, как достичь это: https://blog.logrocket.com/building-a-custom-dropdown-menu-component-for-react-e94f02ced4a1

Надеюсь, это поможет, удачи!