最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS中render出来的页面内容不显示

ReactJS crifan 6103浏览 0评论

对于代码:

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出来的页面内容不显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.199 seconds, using 22.08MB memory