React学习笔记

React笔记四：使用props

1、之前的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//index.tsx文件
import React from 'react';
import styles from './styles.module.scss';

function VelButton(props) {//接收props
    return (
        <button className={classnames(
            styles.button,{
                [styles['primary']]:props.type==='primary'//动态绑定样式
            }
        )}>{props.children}<button>
    )
}

export default VelButton;

//styles.module.scss文件
.primary{
    background-color: #409eff;
}

2、使用组件

1
2
3
4
5
6
7
8
9
10
11
//app.tsx文件
import VelButton from './components/button';

function App() {
    return(
        .....
        .....
        <VelButton type='primary'>新的按钮</VelButton>
        .....
    )
}