React-Demo

react数据渲染

需求

• 需求：实现评论列表功能
  // - 如果有评论数据，就展示列表结构 li（ 列表渲染 ）要包含a标签
  // - name 表示评论人，渲染 h3
  // - content 表示评论内容，渲染 p
  // - 如果没有评论数据，就展示一个 h1 标签，内容为： 暂无评论！
  // - 根据自己的喜好添加样式
  // - 给a标签注册点击事件, 打印内容

code

<script type="text/babel">
    const list = [
        { id: 1, name: 'jack', content: 'rose, you jump i jump' },
        { id: 2, name: 'rose', content: 'jack, you see you, one day day' },
        { id: 3, name: 'tom', content: 'jack,。。。。。' }
    ]

    // 遍历数据,生成li列表格式
    let data = list.map((item)=>{
        return <li className="pink" key={item.id}><a onClick={(event)=>{
            console.log(event.target)
            console.log(event.target.innerText)
        }}><h3 style={{backgroundColor:"orange"}}>{item.name}</h3><p>{item.content}</p></a></li>
    })

    // 完成列表渲染
    let ul = <ul className="hotpink">{data}</ul>

    // 实现条件渲染
    const div = <div>{list.length? ul : <h1>暂无评论！</h1>}</div>

    // 渲染到页面中
    ReactDOM.render(div,document.getElementById("root"))
</script>

结果