关于 react组件 的写法 认知 1

1、引入各种所需，如 react

2、class 类  组件的创建（也可以直接 export default 出去）
抛出组件1：
	class 名字 extends React.Component
	export default  名字
抛出组件2：
export default  class 名字 extends React.Component {}

3、类，里面的操作
	1、state 对象（数据初始化的地方）
	2、render方法（1、创建dom 和 const 数据的地方，建议都写在里面）
		1、必须用箭头函数
    	2、创建dom 需要 用到 return 
   		3、注意用 （）包括 html ，解决不能一下子return 的问题
   		4、创建点击事件的时候，箭头函数 ，调用直接是 -- >  名字（）
   			const fn =()=>{ }
   			调用
   			fn() // 注意：需要写在 render（） 里面才可以（必须是 箭头）

	3、render 里面 return （） dom 里面必须包括有且只有一层的 div 包括
	4、render 里面 其实就是 大的 dom 创建和 函数 封装创建的 地方。 
	5、其 手法 和创建 类型都是一样的。
	
	const aa =（）=>{
		return (dom)
	}

	return（
		<> // 必须有且只有一层 外层包括
			<aa> </aa> // 引用
		</>
	）
   		
3、componentDidMount方法（数据请求 和 接收数据传递的方法）

注意：声明 创建dom  和 数据 可以再 render 里面 进行（解决this 指向问题）
一定要用 箭头函数
数据渲染 用map
对象的解构

代码参考

import React from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb , Dropdown, Button, message, Space, Tooltip} from 'antd';
import axios from 'axios';
import {Link} from 'react-router-dom'
import {UserSwitchOutlined, UserOutlined ,AccountBookOutlined ,HeartOutlined} from '@ant-design/icons';
import '../home/home.css'

const { Header, Content, Footer } = Layout;

class home extends React.Component {
  state = {
    collapsed: false,
    img:'http://192.168.251.235/external/wcm/upload/logo/2021-11/a83be552ac2145b1bea97c7f05f80f8f.png'
  };

  render(){ // 1、在 render 里面写 const函数内写dom  2、在render 里面写 方法（外面写 需要用到this）

    const menu = ()=>{
      return ( // 此处用 括号是为了 让 多行代码 都 return 出去
        <Menu onClick={handleMenuClick}>
          <Menu.Item key="calendar" icon={<AccountBookOutlined />}>
            calendar
          </Menu.Item>
          <Menu.Item key="My favorite" icon={<HeartOutlined />}>
            My favorite
          </Menu.Item>
          <Menu.Item key="1" icon={<UserSwitchOutlined />}>
            Log out
            <Link to="/"></Link>
          </Menu.Item>
        </Menu>
      );
    }

    const handleMenuClick = (e)=> {
      if(e.key !== '1') {
        message.info(e.key+' do you want to know ?');
      }else {
        this.props.history.push('/')
      }
      console.log('click', e);
    }

    const goMyWorld = (values)=>{
      if(values.key === '6') {
        this.props.history.push('/list1')
      }
    }
    
    const arryList =[
      {
        'name':'元宇宙',
        'key':'1'
      },
      {
        'name':'云吃播',
        'key':'2'
      },
      {
        'name':'五维空间',
        'key':'3'
      },
      {
        'name':'完美世界',
        'key':'4'
      },
      {
        'name':'我的世界',
        'key':'5'
      },
      {
        'name':'列表',
        'key':'6'
      }
    
    ]

    return (
      <>
      <Layout className="layout">
        <Header>
          <img className="logo" alt="" src={this.state.img}/>
          <Menu mode="horizontal" defaultSelectedKeys={['1']}>
            {arryList.map((obj) => { // 凡是 dom 的函数创建 都需要 用到 return；
              return <Menu.Item onClick={goMyWorld} key={obj.key}>{obj.name}</Menu.Item>;
            })}
          </Menu>

          <Space wrap>
            <Dropdown.Button overlay={menu} placement="bottomCenter" icon={<UserOutlined />}>
              yachao.liu
            </Dropdown.Button>
          </Space>

        </Header>

        <Content style={{ padding: '0 50px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>login</Breadcrumb.Item>
            <Breadcrumb.Item>home</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-content">Content</div>
        </Content>

        <Footer style={{ textAlign: 'center' }}>yachao.liu 2021-11-27-11:12 @ all peopl</Footer>
      </Layout>
      </>
    );

  }

  componentDidMount() { // 里面进行数据请求

    const sendAxios = ()=> {
      axios.get('http://192.168.251.235/edrmscore/api/sect/selectSectAndArchTypeTree?token=00004144d5cd25df418c979f057004a02bf2')
      .then(function (response) {
        console.log(response.data.obj.stackTrace,'????227')
      })
      .catch(function (error) {
        console.log(error);
      })
    }
    sendAxios()

  }
  
}

home.propTypes = {};

export default connect()(home);