Giới thiệu
Tôi sẽ làm bản ghi nhớ này để xem lại mã trước đó và tôi tự hỏi liệu tôi có thể tạo thẻ Bố cục không.
Nó được mô tả để giữ cho mọi thứ đơn giản và có tổ chức.
Xin vui lòng cho tôi biết nếu có một cách tốt hơn. Xin lỗi cho bất kỳ lỗi chính tả.
mã
Layout.jsx và UseLayout.jsx ở cùng cấp độ. Trên thực tế, tốt hơn hết là tách chúng ra
Nếu bạn muốn tạo Bản đánh máy, Trẻ em có thể đi và cảm thấy tốt nếu bạn nhập và gán ReactElement từ react . children: ReactElement <any> Thích cái này.
Layout.jsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import React, { Fragment, cloneElement } from "react"; const Layout = props => { const { title, children } = props; return ( <Fragment> <div> {title} </div> {cloneElement(children)} </Fragment> ) } export default Layout; |
Sử dụngLayout.jsx
1 2 3 4 5 6 7 8 9 10 11 12 | import React from "react"; import Layout from "./Layout"; const UseLayout = () => ( <Layout title="This is Layout"> <div> Put component here <button>This is button</button> </div> </Layout> ) |
Trong trường hợp tạo hộp thoại hoặc thay đổi động sự kiện
Khi bạn muốn áp dụng một hộp thoại tương tự như tài liệu-ui của nhiều trang
Tuy nhiên, trong trường hợp bạn muốn thay đổi sự kiện
Tôi đang viết bằng TypeScript, nhưng nếu bạn muốn sử dụng JavaScript, hãy xóa các props :
thay đổi = ({children, title, ...}) => thành = props =>
Hộp thoại.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import React, { cloneElement, ReactElement } from "react"; import Dialog from "@material-ui/core/Dialog"; import Button from "@material-ui/core/Button"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; type Props = { children: ReactElement<any>, title: string, description: string, disagree: string, agree: string, action?: Function | null, } const Dialog: React.FC<Props> = ({ children, title, description, disagree, agree, action = null, }) => { const [open, setOpen] = React.useState(false); return ( <span> {cloneElement(children, {onClick: () => setOpen(true)})} <Dialog open={open} onClose={() => setOpen(false)} > <DialogTitle>{title}</DialogTitle> <DialogContent> <DialogContentText> {descriotion} <DialogContentText> </DialogContent> <DialogActions> <Button onClick={() => setOpen(false)}> {disagree} </Button> <Button onClick={() => { action !== null & action() setOpen(false); }}> {agree} </Button> </DialogActions> </Dialog> </span> ) } |
Giải trình
Trẻ em nhận được từ đầu có thể được nhận dưới dạng Dialog.tsx dưới dạng các thành phần,
1 2 3 4 | <Layout> <Button>Click!</Button> </Layout> |
Tiêu đề, nút OK, nút NG và mô tả là các đối số bắt buộc lần này.
1 2 3 4 5 6 7 8 9 10 | <Layout title="test" description="OK or NG?" disagree="button NG" agree="button OK" action={() => concole.log("OK or NG is clicked")} > <Button>Click</Button> </Layout> |
Và tôi sẽ thiết lập hành động cho từng thành phần
Bạn có thể thực thi chức năng bằng cách chuyển chức năng bạn muốn thực thi thành hành động.
Khi sử dụng react-redux , bạn cũng có thể áp dụng công dispatch cho hành động.