react 遍历二维数组渲染数据 +三目判断显示

最新推荐文章于 2025-04-21 09:52:56 发布

张萌2018

最新推荐文章于 2025-04-21 09:52:56 发布

阅读量1.5k

点赞数

分类专栏：代码文章标签： react 三目二维数组

本文链接：https://blog.youkuaiyun.com/MengRui2333/article/details/108528927

版权

代码专栏收录该内容

27 篇文章

订阅专栏

arr demo

this.state = {
        noteArr:[
        [{
          name:"笔记0",
          defaultNote:false
        },{
          name:"笔记1",
          defaultNote:true
        },{
          name:"笔记2",
          defaultNote:false
        },{
          name:"笔记3",
          defaultNote:false
        }],
        [{
          name:"笔记4",
          defaultNote:false
        },{
          name:"笔记5",
          defaultNote:false
        },{
          name:"笔记6",
          defaultNote:false
        },{
          name:null,
          defaultNote:null
        }]
      ],
    }

render中的写法

<div className="noteList">
        <div className="noteListContent">
          {
            this.state.noteArr.map((items,key)=>{
              return (
                <div key={key} className="row">
                  {
                    items.map((item,index) => {
                      return (key === 0 && index === 0)?
                        <div className="addNewMind" onClick={this.createNote}> + 创建笔记</div>:
                        (item.name === null)?
                        <div key={index} className="note-div" style={{'opacity':'0'}}>
                          <p className="note-head">
                            <span>{item.name}</span>
                          </p>
                        </div>
                        :
                        <div key={index} className="note-div">
                          <p className="note-head">
                            <span>{item.name}</span>
                          </p>
                        </div>
                    })
                  }
                </div>
              )
            })
          }
        </div>
      </div>

运行截图