繁体   English   中英

如何使用物化 css 网格或反应引导网格以在 ReactJS 中的映射响应中显示每行中的 3 个项目?

How to use materialize css grids or react bootstrap grids to show 3 items in each row from a mapped out response in ReactJS?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我试图从同一行的映射响应中显示三个或四个响应项。 我查看了其他堆栈溢出,但他们的问题略有不同,我不知道如何实现我的示例。

我尝试使用引导程序和 css 物化网格来完成这项工作。 但是,该纪录片没有显示我拥有的映射示例。 正如文档所说,还尝试将“row”的className添加到父div,并将“col”的className添加到子div。 但它只是一遍又一遍地重复同一个项目。 我希望每个单独的项目只显示一次。

import React from "react";
import axios from "axios";
import LoadingIndicator from "./loadingIndicator"

const API_KEY="something";
const API_KEY2="something1";
const API_KEY3="something2"

class Recipes extends React.Component {

    state= {
        ingredients:[this.props.ingredients],
        loaded:false
    }

    handleChange=(e)=> {
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit=(e)=> {
        e.preventDefault();
        console.log(this.state);
        axios.get(`https://www.food2fork.com/api/search?key=${API_KEY3}&q=${this.state.name}`)
            .then(res=> {
                console.log(res)
                this.setState({
                    ingredients:res.data.recipes,

                })
            })
    }


    render() {  



        const recipeList = this.state.ingredients.length >0? this.state.ingredients.map((ingredient)=> {
            return(
                <div className="row" key={ingredient.recipe_id}>
                   <div className="col s12 m6 l3">
                    <img className="recipeImage" src={ingredient.image_url}/>
                    <p>{ingredient.title}</p>
                   </div>
                </div>
            )
        }) : <LoadingIndicator loaded={this.state.loaded}/>
        return(
            <div style={{padding:50}}>
            <form className="form" onSubmit={this.handleSubmit}>
                <label>Food Name or Ingredient: </label>
                <input
                    id="name"
                    onChange={this.handleChange}
                    className="formText"
                    type="text"
                    placeholder="type in ingredient or recipe"
                 />
                 <button className="btn waves-effect waves-light" type="submit" name="action">Submit</button>
            </form>
                <div style={{marginTop:100}}>
                    {recipeList}
                </div>   
            </div>
        );
    }

}


export default Recipes;

到目前为止,我已经展示了它,但是相同的响应项在同一行中重复了三遍。 我希望每个单独的项目在每一行上只显示一次

1 个回复

map function 有一个可选的index参数,可用于跟踪迭代中项目的当前index ,以及正在迭代的数组本身的参数。

您本质上想要做的是在每第 0 次、第 3 次、第 6 次等迭代的开始创建div.row开始标记。 您还希望在每 2、5、8 次迭代时关闭标签。 因此,您使用index属性将该代码移动到 if 条件中。

this.state.ingredients.map((ingredient,i, ingredientList) => {
    if (ingredientList.length == 1) { //if only one item in the list add starting and closing tags
        return (
           <div className="row" key={ingredient.recipe_id}>
               <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
               </div>
           </div>
       )        
    else if (i%3 === 0){ 
       return ( //add opening tag at every multiple of 3
        <div className="row" key={ingredient.recipe_id}>
               <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
               </div>
       )
    else if(i%3 === 2 || i === ingredientList.length-1){//add closing tag if last item or 2nd, 5th, 8th...
       return (
             <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
             </div>
         </div>
       )
    else { //Only add element otherwise
       return (
              <div className="col s12 m6 l3">
                <img className="recipeImage" src={ingredient.image_url}/>
                <p>{ingredient.title}</p>
             </div>
       )
    }
});
4 如何在 php 循环中使用引导网格

我正在尝试从 db 中读取一些数据并将其写入带有引导网格的 html 页面上。 这段代码是提供给我的,到目前为止我只添加了两个标签:和。 我有两个问题: 1) ide 看不到这两个 div 的结束标签。 为什么? 当我单击结束 div 标签时,它显示这些是额外的,需要删除。 2) 即使我已经解决 ...

6 怎么做