React笔记四：使用props

1、之前的例子

//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、使用组件

//app.tsx文件
import VelButton from './components/button';

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