搭建基础布局
components
Header
index.less
index.tsxLayout
index.less
index.tsxpages
_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>
);
}
- 相关iss 地址