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 /历史记录中； 公司简介/分配

 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），我的想法是从aboutmenu.js（第一个代码段）中导入MenuExampleVerticalDropdown。 我找不到有关如何访问该州的任何文档或任何相关内容。

我观察到的一件事：如果将Aboutmenu.js第2行修改为

state = { activeItem: 'General Information'}

它显然在所有页面上都显示了“常规信息”，如图1所示

Answer 1

在React中，除非使用Redux之类的东西，否则无法直接访问不同组件的状态，这对于您的目的来说是一个过大的杀伤力。

为了沟通组件，您需要使用组件的父级作为沟通的桥梁来执行“ 三角剖分 ”，这里有一个非常好的教程，介绍了如何实现此目的： https : //blog.logrocket.com/building-a -custom-下拉菜单组分换反应-e94f02ced4a1

希望对您有帮助，祝您好运！