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;公司简介/分配

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时，它看起来像在第二张图片中。现在，我只能通过点击按钮来做到这一点:( Picture 1 Picture 2

基本上我试着去每个页面（aboutus，aboutus / history，aboutus / distribution），我的想法是从aboutmenu.js（第一个代码片段）导入MenuExampleVerticalDropdown。我没有找到任何关于如何访问该州的文档或任何相关内容。

我观察到一件事：如果你将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

希望它有所帮助，祝你好运！