时间戳

首页 > 解决方案 > 如何使用条件在页面上生成元素

reactjs - 如何使用条件在页面上生成元素

问题描述

for (var k = 0; k < 10; k++) {
      if (k % 2 === 0) {
          weatherText = <div className="in_break">
      }
      weatherText += <div className="eachD" key={k}>
          <div>
            {
              countIt === 0 ? (currDate.getHours() > 12 ? "Tonight" : "Today") : dayOfWeek[weekDay]
            }
          </div>
          <div>
            {
              getDate
            }
          </div>
          <div>
            {
              <ReturnIcon />
            }
          </div>
        </div>
      if (k % 2 === 0) {
          weatherText += </div>
      }
  }

我要做的是eachD在 `in_break' div 中按两个分组

但我不断得到：

Parsing error: Unexpected token 'weatherText = </div>'

这是布局：

in_break
   eachD
   eachD
in_break
   eachD
   eachD
in_break
   eachD
   eachD
...

请帮我解决我的问题

标签： reactjs

解决方案

更新

我希望这能满足您的需求：

setWeatherTextItems = (countId, currDate, dayOfWeek, weekDay, getDate) => {
  // you make sure all the variables such like countId and currDate are available inside this function.
  const items = [];
  for (var k = 0; k < 10; k++) {
    items.push(
      <div className="eachD" key={k}>
        <div>
          {countIt === 0
            ? currDate.getHours() > 12
              ? "Tonight"
              : "Today"
            : dayOfWeek[weekDay]}
        </div>
        <div>{getDate}</div>
        <div>{<ReturnIcon />}</div>
      </div>
    );
  }

  return items;
}

renderInBreak = () => {
  const items = this.setWeatherTextItems();
  const inBreakItems = [];
  let breakBlock = [];
  let newBreak = false;
  items.forEach((textItem, index) => { //1
    if(!newBreak) {
      breakBlock.push(textItem);
      if(index + 1 === items.length){
        inBreakItems.push(breakBlock);
      }
    } else {
      inBreakItems.push(breakBlock);
      breakBlock = [];
      breakBlock.push(textItem);

     //without this condition check, the last element will be left out of an odd array length
      if(index + 1 === items.length) {
          inBreakItems.push(breakBlock)
      }
    }
    if(index % 2) newBreak = true; //false
    else newBreak = false; //false
  });

  return inBreakItems.map(twoTextWeatherItems => (
    <div className="in_break">
      {twoTextWeatherItems}
    </div>
  ))
}

render(){
  <div>
    {this.renderInBreak()}
  </div>
}

老的

React 应该以不同的方式处理事情，也许这会起作用：

在您的组件中定义一个方法来设置您的项目：

setWeatherTextItems = (countId, currDate, dayOfWeek, weekDay, getDate) => {
  // you make sure all the variables such like countId and currDate are available inside this function.
  const items = [];
  for (var k = 0; k < 10; k++) {
    items.push(
      <div className="eachD" key={k}>
        <div>
          {countIt === 0
            ? currDate.getHours() > 12
              ? "Tonight"
              : "Today"
            : dayOfWeek[weekDay]}
        </div>
        <div>{getDate}</div>
        <div>{<ReturnIcon />}</div>
      </div>
    );
  }

  return items;
}

在您的render方法中，或者您愿意呈现这些项目的地方：

render(){
  <div className="in_break">{this.setWeatherTextItems()}</div>
}

阅读有关如何在循环中渲染事物的更多信息。

您可以在 for 循环内或对您有意义的地方添加您想要的条件。

推荐阅读