홈>
검색 결과에서 가져온 데이터에는 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
- 답변 # 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
이후 기술적으로 온다 논평. 이해가 되길 바랍니다.질문이 있거나 내 코드를 위반하는 형식이 있는지 알려주세요. 반응 코드/변수가 없으므로 분명히 테스트하지 않았습니다.
관련 자료
- javascript - React JS에서 동적 검색 필터를 만드는 방법은 무엇입니까?
- regex - Visual Studio에서 텍스트로 검색 결과를 필터링하려면 어떻게해야합니까? 즉 'serial'을 검색하여 'serialcode'를 가져 오지만 'serialize'는 가져 오지 않습니다
- javascript - 반응으로 검색 필터를 끝내려고하지만 실수가 있습니다
- typescript - 필터에서 데이터를 검색 할 때 Angular SlickGrid에서 빈 데이터 셋이있는 검색 결과를 표시 할 때 "표시 할 데이터 없음"을 표시하고 싶습니다
- Google 스프레드 시트에서 드롭 다운 결과를 필터링 하시겠습니까?
- 자바 스크립트 필터/HTML 목록 검색
- bash - AWK를 사용하여 디렉토리 검색 및 필터링에서 두 가지 다른 결과를 인쇄합니다
- python - 셀레늄이 익스 피디아에서 반환 한 첫 번째 검색 결과를 클릭하는 방법
- django rest에서 작동하지 않는 범위 필터가 필터링되면 전혀 반응하지 않습니다
- reactjs - 반응 - 간단한 ul li 필터
- ruby on rails - 검색 결과를 표시하지 않는 색인
- java - Hibernate Search를 사용하여 JPA 쿼리 결과에 대한 전체 텍스트 검색 수행
- python - Pandas, 조건에 따라 다른 열에서 결과 검색
- reactjs - 반응에서 사용자가 제공 한 검색 입력을 어떻게 조작 할 수 있습니까?
- python - 다른 열의 값에서 열 값을 필터링하고 결과를 여러 목록으로 변환 Pandas
- reactjs - 반응에서이 필터를 구현하는 방법을 잘 모르겠습니다
- reactjs - React로 JSON 데이터의 처음 10 개 결과 만 반환하는 방법
- React Native의 필터 버튼
- 특정 열로 그룹화 된 r의 다른 행에서 필터링/검색
- date - go-mongodb 드라이버로 $gt 필터를 사용하여 문서 검색
관련 질문
- html : Formik이 nextjs 페이지에 표시되지 않습니까?
- javascript : React Variable Statements (JSX)를 사용하여 HTML 삽입 [중복]
- html : 표 행에 텍스트 영역이나 일부 텍스트를 입력하고 행 높이를 늘리지 않고 클릭하거나 드래그하여 확장 할 수있는 방법은 무엇입니까?
- javascript : 단일 클릭을 클릭하지 않는 라디오 버튼
- javascript : 반응 후크에 입력 값을 할당 할 수없는 이유는 무엇입니까?
- html : 행이 가득 차면 데이터를 다른 열로 이동
- html : 최대 너비를 갖고 화면 너비가 최대 너비보다 작아지면 작아지는 반응으로 이미지 갤러리를 만듭니다.
- html : React에서 액세스하기 위해 Bearer 토큰이 필요한 이미지를 표시하는 방법
- javascript : 매핑 된 테이블에서 행당 3 개의 이미지를 보장하는 방법은 무엇입니까?
- javascript : codesandbx에서 컴파일하는 동안 EJS 파일의 구문 분석 오류
만약 당신이 맞다면, 각리스트가 다른 "AddInfo"의 아이템을 보여주는 동안 여러리스트를 생성하고 싶습니다.
먼저, 두 가지가 아닌 세 가지 구성 요소로 작업을 분리하는 것이 좋습니다. 첫 번째 구성 요소는 목록 항목이 될 ListArticle입니다. 두 번째는 구성 요소 목록->표시하려는 목록을 필터링합니다 (필터링 된 후). 마지막 구성 요소는 ListContainer->이 구성 요소는 여러 목록을 보유합니다 (AddInfo의 옵션 수만큼).
ListContainer에서는 모든 고유 한 AddInfo를 살펴보고 모든 옵션에 대해 List 구성 요소를 생성하여 필터링 된 항목 만 전달할 수 있습니다.
ListArticle.js
List.js
ListContainer.js
사용법 :
도움이 되었으면 좋겠다 :)