时间戳

首页 > 解决方案 > 有条件地在 3 个元素后添加一行：ReactJS

javascript - 有条件地在 3 个元素后添加一行：ReactJS

问题描述

我想渲染几行，每行包含三列。这些列只有一个Card. 我认为我可以做到这一点的方法是通过元素并在模数为 0时map创建一个并在它是该行的第三列时关闭它。我尝试过使用语句和三元运算符。但我不断收到语法错误。rowindexrowif-else

render(){
  var { isLoaded, items } = this.state;

  if(!isLoaded) {
    return (<div> Fetching items </div>);
  }
  else {
    var results = items.results;
    return (
      <div className="App">
        <div className ="container">
        { result.map ((result, i) => {
          return(
            {i%3===0 ?
                <div className ="row mt-4">
                  <div key ={i} className="col-md-4">
                    <Card result={result}></Card> 
                  </div>
              :
                  <div key ={i} className="col-md-4">
                    <Card result={result}></Card> 
                  </div>);
              }
            {i%3===1 ?
                </div>
                :null}
              })}

        </div>
      </div>
    );
  }
}

使用这段代码，我在这一行中遇到错误

{i%3===0 ?

我该如何解决这个问题？

标签： javascriptreactjsreact-native

解决方案

因为，您有一个<div>无效的 JSX 未闭合标签，这也{意味着对象不是动态内容。

别忘了我们写的是JSX，而不是 html。每个标签都需要正确关闭，因为它会被转换为React.createElement(component/html tag, props, children).

要解决这个问题，首先准备数组，在 3 项之后，只需将元素压入行数组中，如下所示：

renderRows() {
  let results = items.results;
  let finalArr = [], columns = [];

  result.forEach ((result, i) => {

    // prepare the array
    columns.push(
      <div key ={i} className="col-md-4">
        <Card result={result}></Card> 
      </div>
    );

    // after three items add a new row 
    if((i+1) % 3 === 0) {
      finalArr.push(<div className ="row mt-4">{columns}</div>);
      columns = [];
    }
  });
  return finalArr;
}

render(){
  var { isLoaded, items } = this.state;

  if(!isLoaded) {
    return (<div> Fetching items </div>);
  } else {
    return (
      <div className="App">
        <div className ="container">
          {this.renderRows()}
        </div>
      </div>
    );
  }
}

推荐阅读