javascript - 从 Reactjs 中的 onClick 事件渲染组件内的组件

Question

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

当菜单中的“Tickers”处于事件状态时，它应该会显示 Tabs 组件。当其他菜单项处于事件状态时，不应呈现 Tabs 组件。我有一个 Content、SideMenu 和 Tabs 组件。在我看来，实现这一点的最佳方法是在组件之间传递状态。因此，SideMenu 组件中的按钮将触发 Content 组件来渲染 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 中使用 this.props 访问 Content.js 中的数据

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>
    )
  }
}

希望对你有帮助，如有错误请通知我，谢谢:)