>

검색 결과에서 가져온 데이터에는 enTitle, Image, url, enDescription, HasLandingPage, AddInfo 열이 있습니다.

AddInfo로 검색 결과를 필터링하여 다른 목록에 표시하려고합니다. 나중에 더 나은 버튼을 추가 할 수 있다면

렌더 데이터 :

const ListArticle = (props) =>{
    return (
        <div className="card">
            <div className="search-img-lft">
                <a href={props.link} target="_blank">
                    <img src={props.image} alt="" />
                </a>
            </div>
            <div className="search-imgcont-rgt">
                <a href={props.link} target="_blank">
                    <h3>
                        {props.title}
                        {props.kind} // just to see if kind works
                    </h3>
                    <p>{props.desc}</p>
                </a>
                <a href={props.link} target="_blank" className="default-link">{props.link}</a>
            </div>
        </div>
    );
}

목록 클래스 :( 마음에 넣은 i, brac 및 lim 무시)

   class List extends React.Component {
        render(){
            const liArt =[];
            const searchText = this.props.searchText.toLowerCase().replace(/[^a-z0-9]/g, '');
            var i = 0;
            const brac = this.props.start;
            const lim = brac + this.props.qtyPerPage;
//the filter below works for resources but I want all to be filtered and show in the list in previous code snippet
                this.props.list.filter(u=>u.AddInfo == "resource").map((article)=>{
                        var artText = (article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '');
                        if(artText.indexOf(searchText)===-1){
                            return;
                        }
                        i++;
                        if(brac<i && i<lim){
                            liArt.push(
                                    <ListArticle key={article.Image+article.URL} 
                                        title={article.enTitle}
                                        image={article.Image+"?h=100&mode=crop&scale=down"}
                                        link={JSON.stringify(article.HasLandingPage).toUpperCase()=="TRUE" ? "/en/"+article.URL : "/" + article.URL}
                                        desc={article.enDescription}
                                        kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                            );//push
                        } //limit check  
                });//map
            return (
                <div className="search-page-listbox">
                    {liArt}
                </div>
                );
   }
}


  • 답변 # 1

    만약 당신이 맞다면, 각리스트가 다른 "AddInfo"의 아이템을 보여주는 동안 여러리스트를 생성하고 싶습니다.

    먼저, 두 가지가 아닌 세 가지 구성 요소로 작업을 분리하는 것이 좋습니다. 첫 번째 구성 요소는 목록 항목이 될 ListArticle입니다. 두 번째는 구성 요소 목록->표시하려는 목록을 필터링합니다 (필터링 된 후). 마지막 구성 요소는 ListContainer->이 구성 요소는 여러 목록을 보유합니다 (AddInfo의 옵션 수만큼).

    ListContainer에서는 모든 고유 한 AddInfo를 살펴보고 모든 옵션에 대해 List 구성 요소를 생성하여 필터링 된 항목 만 전달할 수 있습니다.

    ListArticle.js

    import React from 'react';
    const ListArticle = (props) =>{
        return (
            <div className="card">
                <div className="search-img-lft">
                    <a href={props.link} target="_blank">
                        <img src={props.image} alt="" />
                    </a>
                </div>
                <div className="search-imgcont-rgt">
                    <a href={props.link} target="_blank">
                        <h3>
                            {props.title}
                            {props.kind} // just to see if kind works
                        </h3>
                        <p>{props.desc}</p>
                    </a>
                    <a href={props.link} target="_blank" className="default-link">{props.link}</a>
                </div>
            </div>
        );
    }
    export default ListArticle;
    
    

    List.js

    import React from 'react';
    import ListArticle from './ListArticle';
    export default class List extends React.Component {
        render() {
            return (
                this.props.list.map(article => <ListArticle key={article.Image + article.URL}
                    title={article.enTitle}
                    image={article.Image + "?h=100&mode=crop&scale=down"}
                    link={JSON.stringify(article.HasLandingPage).toUpperCase() == "TRUE" ? "/en/" + article.URL : "/" + article.URL}
                    desc={article.enDescription}
                    kind={article.AddInfo.includes("SKU") ? " Product" : (article.AddInfo.includes("resource") ? " Resource" : " Page")} />
                )
            )
        }
    }
    
    

    ListContainer.js

    import React from 'react';
    import List from './List';
    
    class ListContainer extends React.Component {
        constructor(props){
            super(props);
        }
        render() {
            let lists = {};
            let searchText = this.props.searchText;
            if(this.props){
                let filteredList = this.props.list.filter(article=>(article.enTitle + " " + article.URL + " " + article.enDescription + " " + article.AddInfo).toLowerCase().replace(/[^a-z0-9]/g, '').indexOf(searchText)!==-1);
                filteredList && filteredList.forEach(u => {
                    if(lists[u.AddInfo]===undefined) lists[u.AddInfo]=[];
                    lists[u.AddInfo].push(u);
                });
            }
            return(
                Object.keys(lists).map(function(key, index) {
                    return <List list={lists[key]} />
                 })
            )
        }
    }
    export default ListContainer;
    
    

    사용법 :

    <ListContainer list={list} searchText={searchText} />
    
    

    도움이 되었으면 좋겠다 :)

  • 답변 # 2

    귀하의 List 에서 이와 같은 것을 반환하겠습니다.  수업 (코드 내 의견에 내 사고 과정을 설명하려고 시도했습니다) :

    return (<React.Fragment>
        {
            // second (kinda), I'd convert the inside generated collection (object) into an array
            // -> where the array elements are now ["AddInfo type", [array of elements with that type]] 
            Object.entries(
                // first, convert the list into an object, collecting each type of "AddInfo" into
                // -> a unique property, and storing all objects w/ that type in an array
                this.props.list.reduce((output, u) => {
                    if (!output[u.AddInfo]) output[u.AddInfo] = [];
                    output[u.AddInfo].push(u);
                    return output
                }, {})
            )
            // third, I'd map the new array of ["AddInfo type", [array of elements with that type]] into 
            // -> the jsx output you want, like this:
            .map(([type, array]) => {
                return <div className="search-page-listbox">
                    {array.map((article, i) => {
                        // ... everything inside your ".map((article...)" function can go here
                    })}
                </div>
            })
        }
    </React.Fragment>)
    
    

    몇 가지 메모 :

    <올>

    var i = 0 를 교체 할 수 있습니다  그리고 i++   i 와 라인   map 의 두 번째 매개 변수에서 자동으로 나오는 색인  기능 ( array.map((article, i) => ... 의 내 버전 참조) )

    배열 파괴와 같은 것을 보지 못한 경우 (예 : .map(([type, array]) => ...) ) 알려주세요. 설명 할 수 있습니다. 일부 줄을 저장하기 위해 할 수있는 것은 매우 번거로운 일입니다.

    첫 번째 단계는 AddInfo 를 기준으로 정렬 된 데이터를 보유하는 객체 컨테이너를 만드는 방법을 알아내는 것이 었습니다.  -그래서 내 // first 입니다  의견은 // second 이후 기술적으로 온다  논평. 이해가 되길 바랍니다.

    질문이 있거나 내 코드를 위반하는 형식이 있는지 알려주세요. 반응 코드/변수가 없으므로 분명히 테스트하지 않았습니다.

관련 자료

  • 이전 ios - UIAlertView 스크롤 문제
  • 다음 눈송이는 정규 표현식에서 긍정적 인 모습을 지원합니까?