在 3 个元素后有条件地添加一行:ReactJS [英] Conditionally adding a row after 3 elements: ReactJS

查看：38
本文介绍了在 3 个元素后有条件地添加一行:ReactJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

render(){var { isLoaded, items } = this.state;如果(！isLoaded){return (<div> 获取项目 </div>);}别的 {var 结果 = items.results;返回 (<div className="应用程序"><div className ="容器">{ result.map ((result, i) => {返回({i%3===0 ?<div className ="row mt-4"><div key ={i} className="col-md-4"><卡片结果={结果}></卡片>

:<div key ={i} className="col-md-4"><卡片结果={结果}></卡片>

);}{i%3===1 ?

:空值}})}

);}}

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

{i%3===0 ?

我该如何解决这个问题?

解决方案

因为，你有一个未闭合的 <div> 标签，它是无效的 JSX，还有 { 在return 表示对象不是动态内容.

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

要解决这个问题，先准备好数组，在3个item之后，把行数组中的元素压进去，像这样:

renderRows() {让结果 = items.results;让 finalArr = []，列 = [];result.forEach ((result, i) => {//准备数组列推(<div key ={i} className="col-md-4"><卡片结果={结果}></卡片>

);//在三个项目之后添加一个新行if((i+1) % 3 === 0) {finalArr.push(<div className ="row mt-4">{columns}</div>);列 = [];}});返回 finalArr;}使成为(){var { isLoaded, items } = this.state;如果(！isLoaded){return (<div> 获取项目 </div>);} 别的 {返回 (<div className="应用程序"><div className ="容器">{this.renderRows()}

);}}

I want to render several row containing three columns each. The columns have just a Card. The way I thought I could do this is to map through the elements and create a row when the index modulus is 0 and close that row when it's the third column of the row. I've tried with if-else statements and with ternary operators. But I keep getting syntax errors.

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

With this piece of code I'm getting an error in this line

{i%3===0 ?

How can I solve this?

解决方案

Because, you have a unclosed <div> tag which is invalid JSX, also { in return means an object not dynamic content.

Don't forget we write JSX, not html. Each tag needs to be closed properly, because it will get converted into React.createElement(component/html tag, props, children).

To solve the problem, first prepare the array and after 3 items, just push the elements in row arrays, like this:

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

这篇关于在 3 个元素后有条件地添加一行:ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆