Question

Here is a short demo of what I am trying to accomplish

当“Tickers”在菜单中处于活动状态时，它应显示Tabs组件。当其他菜单项处于活动状态时，不应呈现Tabs组件。我有一个内容，SideMenu和Tabs组件。在我看来，实现这一目标的最佳方法是在组件之间传递状态。因此，SideMenu组件中的按钮会触发内容组件render Tabs组件。我该怎么做呢？

Content.js

import React from 'react'
import { Grid, Image, Segment } from 'semantic-ui-react'
import '../index.css';

import Tabs from './content/Tabs';
import SideMenu from './content/SideMenu';

class Content extends React.Component{

  constructor(){
    super();
  }

  render(){

    return(
      <div>
        <Grid relaxed columns='equal' padded>
          <Grid.Column width={2} >
            <SideMenu />
          </Grid.Column>
          <Grid.Column width = {1}>
          </Grid.Column>
          <Grid.Column width={10}>
            <Tabs />
          </Grid.Column>
        </Grid>
      </div>
    )
  }
}

export default Content

SideMenu.js

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'


export default class SideMenu extends Component {
  constructor(props){
    super(props);

    this.state = { activeItem: 'Tickers' };
  }


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

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

    return (
      <Menu pointing secondary vertical>
        <Menu.Item name='Tickers' active={activeItem === 'Tickers'} onClick={this.handleItemClick} />
        <Menu.Item name='All Time Highs' active={activeItem === 'All Time Highs'} onClick={this.handleItemClick} />
        <Menu.Item name='Article Sentiment' active={activeItem === 'Article Sentiment'} onClick={this.handleItemClick} />
      </Menu>
    )
  }
}

Tabs.js

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane> },
]

const Tabs = () => (
  <Tab menu={{ secondary: true }} panes={panes} />
)

export default Tabs

Answer 1

我有解决方案，你可以将activeItem和handleItemClick移到Content.js，然后转到侧边菜单组件，这样我们就可以在Content.js中进行条件渲染

Content.Js

import React from 'react'
import { Grid, Image, Segment } from 'semantic-ui-react'

import Tabs from './content/Tabs';
import SideMenu from './content/SideMenu';

class Content extends React.Component{
  constructor(){
    super();
    this.state = { activeItem: 'Tickers' }; //move state from SideMenu.js
  }
  handleItemClick = (e, { name }) => this.setState({ activeItem: name }) //move function onClick from SideMenu.js
  render(){
    const { activeItem } = this.state //call the state
    return(
      <div>
        <Grid relaxed columns='equal' padded>
          <Grid.Column width={2} >
            <SideMenu handleItemClick={this.handleItemClick} activeItem={activeItem} /> {/* passing the handleItemClick and activeItem */}
          </Grid.Column>
          <Grid.Column width = {1}>
          </Grid.Column>
          <Grid.Column width={10}>
            { this.state.activeItem === 'Tickers' && //this is for conditional render Tabs.js
              <Tabs />
            }
          </Grid.Column>
        </Grid>
      </div>
    )
  }
}

然后在SideMenu.js使用Content.js

访问this.props中的数据

SideMenu.js

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'


export default class SideMenu extends Component {
  constructor(props){
    super(props); //move state to Content.js
  }
  // move function to Content.js
  render() {
    //move state to Content.js
    return (
      <Menu pointing secondary vertical>
        {/* access activeItem and handleItemClick using this.props */}
        <Menu.Item name='Tickers' active={this.props.activeItem === 'Tickers'} onClick={this.props.handleItemClick} />
        <Menu.Item name='All Time Highs' active={this.props.activeItem === 'All Time Highs'} onClick={this.props.handleItemClick} />
        <Menu.Item name='Article Sentiment' active={this.props.activeItem === 'Article Sentiment'} onClick={this.props.handleItemClick} />
      </Menu>
    )
  }
}

我希望能帮助你，如果你有错误请注意我，谢谢：）

Answer 2

你应该有条件渲染的逻辑，点击你设置一些标志。根据该标志，您可以显示嵌套组件，如提到的here。

从Reactjs中的onClick事件渲染组件中的组件

2 个答案: