react next 构建大屏实践

搭建基础布局

  • 参考资料: 地址
  • 使用typescript next9.0.0+内置typescript 地址
  • 目录结构

components

Header

index.less
index.tsx

Layout

index.less
index.tsx

pages

_app.tsx
index.tsx

  • 具体代码实现
  • Header/index.tsx
import React from "react";
import "./index.less";

const Header = ({ title }) => {
  return <div>{title}头部</div>;
};

export default Header;
  • Layout/index.tsx
import React from "react";
import Header from "../Header/index";

const Layout = ({ children, title }) => {
  return (
    <>
      {/* 头部 */}
      <Header title={title} />
      {children}
      底部
    </>
  );
};

export default Layout;
  • pages/_app.tsx
import App, { Container } from "next/app";
import React from "react";
import Layout from "../components/Layout/index";

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }

  // 在 Layout 传入参数 title,使每个页面可以设置不同的title。
  render() {
    // @ts-ignore
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Layout title={pageProps.title}>
          <Component {...pageProps} />
        </Layout>
      </Container>
    );
  }
}

export default MyApp;

报错

  • 使用bizCharts报错document is not defined
  • 解决:
import React from 'react';
import ReactDOM from 'react-dom';
let bizcharts;
if (process.browser) {
  bizcharts = require('bizcharts');
}

const data = [
  { genre: 'Sports', sold: 275, income: 2300 },
  { genre: 'Strategy', sold: 115, income: 667 },
  { genre: 'Action', sold: 120, income: 982 },
  { genre: 'Shooter', sold: 350, income: 5271 },
  { genre: 'Other', sold: 150, income: 3710 }
];

const cols = {
  sold: { alias: 'amount' },
  genre: { alias: 'game type' }
};

export default () => {
  return (
    <div>
      {process.browser &&
        <bizcharts.Chart width={600} height={400} data={data} scale={cols}>
          <bizcharts.Axis name="genre" />
          <bizcharts.Axis name="sold" />
          <bizcharts.Legend position="top" dy={-20} />
          <bizcharts.Tooltip />
          <bizcharts.Geom type="interval" position="genre*sold" color="genre" />
        </bizcharts.Chart>
      }
    </div>
  );
}
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页