Question

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
...

请帮助我解决问题

Answer 1

已更新

我希望这能找到满足您需求的方法

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>
}

OLD

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>
}

详细了解how to render things in a loop。

您可以在for循环中添加您想要的条件，或者在您认为合适的地方添加条件。

Answer 2

不确定该逻辑是否可以在React环境中工作，但是据我从您的普通代码可以看到的那样，当您要添加'in_break'div时，您不是只是重新分配整个ifText而不是联接文本呢？

  Shouldn't this:
  if (k % 2 === 0) {
      weatherText = </div>
  }
  be written like this?
  if (k % 2 === 0) {
      weatherText += </div>
  }

根据拼写错误进行编辑：

I tried to run your code on codepen to have a quicker and easier understanding on how to find a solution. 
I created an helper function with your code then I returned 
<div className="Container" dangerouslySetInnerHTML={{__html: weatherText}}></div>
This enables you to have the result you are looking for. Only the even elements have the 'in_break' class.

希望这会有所帮助，如果不正确，请告诉我。

Codepen：https://codepen.io/dpgian/pen/EBzRmX

如何使用条件生成页面上的元素

2 个答案: