对于代码：
index.js
。。。 render() { const { cowList } = this.state; console.log(cowList); return ( <div class={style.the_herd_all}> <div class={style.cz_top_box}> <ul> <Link href="/cowSearch"> <li class={style.min_box}> <input class="" type="text" name="" id="" placeholder="输入牛号搜索" disabled="disabled" /> </li> </Link> </ul> </div> <div class={style.the_herd_all}> <ul class={style.nn_a_list}> { cowList.map(item => { return ( <CowListItem data={item} /> ); }) } </ul> </div> </div> ); } } function CowListItem({ data}) { const { cow_code, cowshed_id, taici, fanzhistatus, born_date, zuihouchandu_date } = data; console.log(data); return ( <div class={style.item}> <div> <p>牛号：<span>{cow_code}</span></p> <p>牛舍：{cowshed_id}</p> <p>胎次：{taici} </p> </div> <div> <label>{fanzhistatus}</label> <div>出生日期：{born_date}</div> <div>最近产犊：{zuihouchandu_date}</div> </div> </div> ); } |
style.less
.item { position: relative; display: flex; padding: 0.22rem 1.52rem 0.22rem 0.2rem; line-height: 0.46rem; color: #535353; font-size: 0.28rem; border-top: 1px solid #cccac9; min-height: 1.0rem; > div { line-height: 0.46rem; color: #535353; font-size: 0.28rem; > p, > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; } } > label { position: absolute; bottom: 0.18rem; right: 0.3rem; display: inline-block; min-width: 1.32rem; padding: 0 0.06rem; height: 0.4rem; border: 1px solid #48da6a; color: #48da6a; font-size: 0.28rem; line-height: 0.38rem; text-align: center; border-radius: 0.04rem; } } .item > div:first-child { width: 50%; } .item > div:nth-child(2) { padding-left: .2rem; width: 50%; } .item span { font-size: 0.34rem; font-weight: bold; color: #007af9; } .item > a { position: absolute; top: 0.37rem; right: 0.2rem; display: inline-block; width: 1.1rem; height: 0.6rem; background: #007af9; color: #fff; font-size: 0.28rem; line-height: 0.6rem; text-align: center; border-radius: 0.04rem; } 。。。 |
但是结果render出来的内容，就是不显示：
经过一番调试发现和别处正常显示的内容，不一样：
正常的是：
此处不正常的是：
生成的html都是：
<cowlistitem data="[object Object]"></cowlistitem>
以为是此处传入的data对象Object有误呢。
但是通过打log，输出的对象是正常的：
最后发现，原来是：
把：
cowListItem
改为，大写开头的：
CowListItem
就可以了正常输出html，正常显示了：
然后再去注意到：
大写的时候，提示的是：
function CowListItem({data}: { data: any; }): JSX.Element |
小写开头提示的是：
({data}: { data: any; }) => JSX.Element |
【总结】
然后也知道原因了：
就是之前看ReactJS教程中所提示的：
“1.组件的首字母要大写
-》
<div />表示一个DOM标签
而<Welcome />表示一个React的组件”
而此次子所以写错，则是因为：
VSCode中，用了代码替换，参考了别处的代码后，把cowshedList，替换为cowList，然后点击全部替换，
又没有全字匹配，也没有区分大小写，结果导致把
CowshedListItem
替换为
cowListItem
从而导致此处错误了。
从而导致，render时，对于小写开头的标签：
<cowListItem data={item} />
误以为是html普通的标签了。
改为大小开头的：
<CowListItem data={item} />
才会正常解析，去调用
function CowListItem({ data}) {
去解析成对应的html元素。
转载请注明：在路上 » 【已解决】ReactJS中render出来的页面内容不显示