【small start】封裝一個tag組件

import './style.less';
import React, { ReactNode, useState } from 'react';

interface IProps {
    text: string
}
const App: React.FC<IProps> = (props) => {
    const {text,}=props
    const [active, setActive] = useState(false);
    const newEvent=()=>{
        console.log('123')
        setActive(!active)
    }
    let ls='panal_wrapper'
    if(active){
        ls+=' active'
    }
    return <div className={ls}>
        <span>{text}<a onClick={newEvent}>X</a></span>
    </div>
}

export default App;

//style.less
.panal_wrapper{
    padding-top: 10px;

    &.active{
        display: none;
    }
    span{
        width: 50px;
        height: 20px;
        line-height: 20px;
        padding: 10px 20px;
        border: 1px solid;
        color: red;
        a{
            padding-left: 10px;

        }
    }
}

//main.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './Tags'
const text={

}
ReactDOM.render(
  <React.StrictMode>
    <App text={'123'}/>
  </React.StrictMode>,
  document.getElementById('root')
)