react next 构建大屏实践

最新推荐文章于 2024-04-22 10:07:39 发布

第十人i

最新推荐文章于 2024-04-22 10:07:39 发布

阅读量259

点赞数

分类专栏： next react 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_37124515/article/details/107342358

版权

react 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

搭建基础布局

参考资料: 地址
使用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>
  );
}