萌新自学React 第三天(编写主界面【1】)

  • 时间:
  • 浏览:
  • 来源:互联网

在App.js上编写那面的代码

import React from "react";
import { Layout } from "antd";

import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
import "./App.css";

const { Header, Sider, Content } = Layout;

export default class App extends React.Component {
  state = {
    collasped: false,
  };
  toggle = () => {
    this.setState({ collasped: !this.state.collasped });
  };
  render() {
    return (
      <Layout style={{ height: "100%" }}>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collasped}
        ></Sider>
        <Layout>
          <Header style={{ background: "#ffffff", padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: this.toggle,
              }
            )}
          </Header>
          <Content style={{ background: "#ffffff", margin: "10px" }}></Content>
        </Layout>
      </Layout>
    );
  }
}

得出下图的效果

react的组件里,state里面是数据,改变state里面的值使用setState,setState需要在特指的方法里面才能使用,否则会报错,比如:

上面代码有个toggle的方法,

1.如果使用

toggle(){
    this.setState({collapsed:!this.state.collapsed})
}

则在onclick那里需要使用

onClick:()=>this.toggle()

2.如果使用

toggle=()=>{
    this.setState({collapsed:!this.state.collapsed})
}

则在onclick那里使用

onClick:this.toggle

以上两种方法都可行,但是为什么需要特指,萌新的我由于初学,暂时不知道原因。

本文链接http://www.dzjqx.cn/news/show-617241.html