07.组件化实战

Posted on In , ,

这一章是对组件化的实战，可以跳过

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
//\src\components\dialog.jsx

import PropTypes from 'prop-types';
import React from 'react';

const Dialog = function Dialog(props) {
    // 获取传递的属性和插槽信息
    let { title, content, children } = props;
    children = React.Children.toArray(children);

    return <div className="dialog-box" style={{ width: 300 }}>
        <div className="header" style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
        }}>
            <h2 className="title">{title}</h2>
            <span>X</span>
        </div>
        <div className="main">
            {content}
        </div>
        {children.length > 0 ?
            <div className="footer">
                {children}
            </div> :
            null
        }
    </div>;
};

/* 属性规则校验 */
Dialog.defaultProps = {
    title: '温馨提示'
};
Dialog.propTypes = {
    title: PropTypes.string,
    content: PropTypes.string.isRequired
};

export default Dialog;

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//.\src\index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import Dialog from './components/dialog';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>
        <Dialog title="友情提示" content="大家出门做好个人防护！" />

        <Dialog content="我们一定要好好学React！">
            <button>确定</button>
            <button>很确定</button>
        </Dialog>
    </>
);