react 踩坑

1.遍历的时候 要写key ，并且key 要放在亲儿子身上。

//正确
 data.map((item,index)=>{
            return (
               <div  key={index} >
                <p>{item.id}</p>
                <p>{item.label}</p>
                <GoalTtem  isTop={false}  result={result} />
               </div>
            
            )
        })

//错误 ，不能写在GoalTtem上，必须写在map的最外层上
 data.map((item,index)=>{
            return (
               <div  >
                <p>{item.id}</p>
                <p>{item.label}</p>
                <GoalTtem  key={index}
                isTop={false}  result={result} />
               </div>
            
            )
        })

2. 子组件接收参数resule，报错result找不到

控制台报错是 result is not defined

 const GoalItem = (props: Props) => {
 // props 必须要接收到result 。否则肯定找不到的。必须的接收。接收。接收。
    const { isTop, result, } = props

3. react的style 中宽度为变动值 如何添加

// 首先遵循上一步。 result 要接收，
 <div style={{ width: `${result.rate}`, height: '100%', maxWidth: '100%', backgroundColor: '#9bd864', }}>   </div>

4. react 创建子组件报错

不能将类型"()=>void" 分配给类型“FC<{}>”

这是 函数组件 。 函数组件 切记，必须有返回元素

//第一步创建Grand组件
const  Grand :React.FC= () =>{
//切记第三步
return (
          <div>必须有return小括号。要不就报错
          </div>
      )
}
//第二步 抛出
export default  Grand