在React中，由于数据不可变性 若需要更改 则需要通过通知父元素 来更新子元素的数据

如我们需要通过点击事件 来更改子元素相应的样式

那么首先我们现在父元素中利用useState来进行数据的更改 给父元素传一个selected 用来作为可更改的数据 传一个onSelected来更改数据

const [timeRange ,setTimeRange] = useState('thisMonth')
 <TimeRangePick selected={timeRange} onSelected ={setTimeRange}/>

我们将要被点击的数据放到数组里面 然后利用map遍历 给每一项都添加一个点击事件 每当点击的时候 我们都调用引入的onselected 也就是把父元素中的selected赋值为我们现在点击的数据 然后我们进行判断 是否这个时候的selected就是我们当前点击的数据 如果是就改变当前样式

import React from "react";
import s from './TimeRangePicker.module.scss'

interface Props {
    selected: string ,
    onSelected: (selected : TimeRanges) => void 
}
export type TimeRanges = 'this month' | 'last month' |'last year'|'diy time';
export const TimeRangePick:React.FC<Props> = ({ selected , onSelected }) =>{

const TimeRange :{key: TimeRanges ,text:string}[]  = [
    {key: 'this month' , text: '本月'},
    {key: 'last month' , text: '上月'},
    {key: 'last year' , text: '去年'},
    {key: 'diy time' , text: '自定义事件'}
]
 return <ol flex flex-row children-px-24px children-py-16px cursor-pointer> 
   {TimeRange.map(tr => <li  pointer-cursor className={tr.key === selected ? s.selected : '' } onClick={() => onSelected(tr.key)} key={tr.key}>{tr.text}</li>)}
 </ol>
}

其实就相当于父元素提供了 一个读 一个写的接口