react通过组件实现星星评价（小白可看）

最新推荐文章于 2024-03-31 15:57:35 发布

原创最新推荐文章于 2024-03-31 15:57:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在React中封装可复用的组件，并通过props进行数据传递。具体讲解了如何定义组件、导入导出、在主页面调用组件及传递数据的方法。并通过一个星星评论组件实例，展示了如何在组件中使用this.props获取数据，以及如何利用state和map循环渲染数组数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装组件并传值

可用propstype

先定义一个组件使用export default 来抛出组件
在主页面使用import 变量 from ‘地址’来引入
直接在主页面调用定义名称，比如首字母按组件要求大写，可以小写，但不推荐
然后在中直接加入传递的数据

封装的Discuss组件

使用this.props来获取组件传递过来的数据（可以添加到this.state中
数据以及获取到了可以在this.state中再定义一个数字比如

 arr:[1,2,3,4,5]

在return中直接判断渲染
使用map来循环this.state中arr的数据
使用三目运算符来输出，如如下代码

 {/*星星组件*/}
              <span className="page-Liquor-estimate">
                {
                  this.state.arr.map((item,index)=>{
                    return(
                      <span key={index}>
                        {item>=item.Star?<span style={{color:"#FFAC2D",fontSize:"20px"}}>☆</span>:<span style={{color:"#FFAC2D",fontSize:"20px"}}>★</span>}
                      </span>
                    )
                  })
                }
              </span>

然后一个简单的星星评论组件就做好了