Question

下面是代码：

import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, ProfileFilled, CreditCardFilled, SearchOutlined, BankOutlined} from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Sider, Footer } = Layout;

function Admin(){
    function handleClick(){
        console.log("Search")
    }
    return(
        <Layout>
    <Header className="header">
      <div className="logo" />
      <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']} icon={<UserOutlined />}>
        <Menu.Item key="1">Creame Cookies</Menu.Item>
      </Menu>
    </Header>
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          theme="dark"
          mode="inline"
          defaultOpenKeys={['Dashboard']}
          defaultSelectedKeys={['Dashboard']}
          style={{ height: '250%', borderRight: 0, width: 250 }}
        >
          <Menu.Item key="Dashboard" icon={<UserOutlined />}>
              Dashboard
          </Menu.Item>
          
          <Menu.Item onClick={handleClick} key="Search" icon={<SearchOutlined />}>
              Search
          </Menu.Item>

          <SubMenu key="Profiles" icon={<ProfileFilled />} title="Profiles">
            <Menu.Item key="1">Free Profiles</Menu.Item>
            <Menu.Item key="2">Premium Profiles</Menu.Item>
          </SubMenu>
        
          <Menu.Item key="Payments" icon={<CreditCardFilled />}>
            Payments
          </Menu.Item>
    
        </Menu>
      </Sider>
      <Layout style={{ padding: '0 72px 72px' }}>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 500,
          }}
        >
        <h1>Default</h1>
        </Content>
      </Layout>
    </Layout>
    {/*<Footer style={{ textAlign: 'center' }}>Creame Cookies Ltd</Footer> */}
  </Layout>
    )
}

export default Admin

现在，我需要根据单击的菜单项在h1标记的位置使用文本作为默认值渲染组件。我不确定如何做出反应，因为我是新手，并且与已经使用过的vannila javascript和jQuery相比，感觉起来很困难。

Answer 1

<h1>{someCondition ? 'Text A': 'Text B'}</h1>通常是您处理此问题的方式。如果愿意，您始终可以在return语句之前在组件顶部执行条件。

{ }是将表达式包装在React中的语法。您可以在其中放置一个三元或仅一个变量进行渲染。

也可以做<h1>{someCondtion ? <ComponentA /> : <ComponentB />}</h1>。

反应：如何基于MenuItem单击渲染组件？

1 个答案: