Bố cục được bố trí (ft. React TypeScript)

Một trong những khối xây dựng của GUI là một bố cục; nó có thể là một bố cục đơn, một bố cục đôi hoặc nhiều bố cục. Trong khi lùng sục trên mạng để tìm các giải pháp về việc tạo ra một giải pháp, tôi thấy khá khó khăn khi bắt gặp một cách tiếp cận kiểu chữ phản ứng để xây dựng bố cục. Do đó, khi tôi cảm thấy mình đã biên soạn một giải pháp có thể tái sử dụng tốt, tôi nghĩ rằng tôi có thể chia sẻ nó. Trong bài viết này, tôi sẽ hướng dẫn bạn quá trình phát triển bố cục của tôi cùng với tất cả các đỉnh và đáy mà tôi đã lướt qua.

** Vì bài viết này nêu bật việc xây dựng một bố cục, nên nó giả định ít nhất bạn phải hiểu được React-Typescript ở cấp độ mới bắt đầu. **

Hãy nói về cấu trúc tệp trước khi đi đến điểm mấu chốt.
Thường có ba loại CSS như được liệt kê dưới đây:
- CSS nội tuyến - CSS
nội bộ hoặc CSS nhúng
- CSS bên ngoài
Trong suốt dự án này, tôi đã chọn sử dụng CSS bên ngoài vì nó tạo điều kiện phân biệt trong các tệp. CSS bên ngoài sẽ chỉ chứa thuộc tính kiểu với sự trợ giúp của thuộc tính thẻ. Để ngắn gọn, tôi sử dụng:
1. one-column.tsx để gói nội dung hiển thị cùng với các kiểu vào một bố cục duy nhất.
2. one-column.styles.ts for the css (and sass)
Một mẫu tương tự được thiết lập cho hai hoặc nhiều màn hình có khung.
Tất cả thông tin trên màn hình sẽ được mã hóa trong các thư mục tương ứng và chứa trong đó screens.

...
layouts/
  nav-panel.styles.ts
  nav-panel.tsx
  one-column.styles.ts
  one-column.tsx  
  two-columns.styles.ts
  two-columns.tsx
  ...
routes/
  index.tsx
screens/
  screen-two/
    content-panel/
      index.tsx
    layout.tsx
...

import React from ‘react’;
import { ThemeProvider } from ‘react-jss’;
import theme from ‘../app-theme’;
import useStyles from ‘./one-column.style’;
export interface Props {
    contentPanel: React.ReactElement;
}
const OneColLayoutThemeWrapper: React.FC<Props> = (props) => (<ThemeProvider theme={theme}>
    <OneColLayout {…props} />
</ThemeProvider>);
const OneColLayout: React.FC<Props> = (props) => {
const styles = useStyles();
return <div className={styles.mainLayout}>
    {props.contentPanel}
</div>;
};
export default OneColLayoutThemeWrapper;

Các thuộc tính css được bao gồm ( one-column.styles.ts) trông giống như sau:

import { ITheme } from “../app-theme”;
const { createUseStyles } = require(“react-jss”);
export default createUseStyles((theme: ITheme) => ({
    mainLayout: {
        minWidth:"1920px",
        minHeight: "1080px",
        fontSize: "25pt",
        backgroundColor: theme.palette.shade1,
    }
 }))

Mục đích của màn hình này là hiển thị một dòng duy nhất cho mục đích demo, do đó, điều này được thêm vào content-panel/index.tsx

export interface Props {}
const ContentPanel: React.FC<Props> = (props) => {
    return <div>Wubba Lubba Dub Dub</div>;
};
export default ContentPanel;

export interface Props {}
const ScreenOneLayout: React.FC<Props> = (props) => {
  return <OneColLayoutThemeWrapper 
   contentPanel={<ContentPanel />}
  />
};
export default ScreenOneLayout;

Ở đây, cột đầu tiên tương ứng với bảng điều hướng và cột thứ hai tương ứng với bảng nội dung. Two-column.tsx của chúng tôi sẽ được tạo thành để chứa hai cột, do đó:

export interface Props {
  columnOne: React.ReactElement;
  columnTwo: React.ReactElement;
}
const TwoColsLayoutThemeWrapper: React.FC<Props> = (props) => 
(<ThemeProvider theme={theme}>
  <TwoColsLayout {...props} />
 </ThemeProvider>
);
const TwoColsLayout: React.FC<Props> = (props) => { 
  const styles = useStyles();
  return (
    <div className={styles.twoColumns}>
      <div className={styles.firstColumn}>{props.columnOne} </div>.   
      <div className={styles.secondColumn}>{props.columnTwo}</div>
    </div>
  );
};
export default TwoColsLayoutThemeWrapper;

twoColumns: {
  display: "flex",
  flexDirection: "row",
  width: "100%",
  minHeight: "100vh"
},
firstColumn: {
  minWidth:"300px",
  minHeight: "1080px",
  backgroundColor: theme.palette.shade4,
  display: "inline-block",
  color: theme.white.accent1
},
secondColumn: {
  width:"1620px",
  color: theme.palette.shade4,
  backgroundColor: theme.white.accent1,
  padding:"25px 45px 25px 45px",
}

const ScreenTwoLayout: React.FC<Props> = (props) => {
return (
  <TwoColsLayoutThemeWrapper
    columnOne={<NavPanel />}
    columnTwo={<ContentPanel />}
  />
)};

Cảm ơn bạn đã đọc đến đây!