배열 항목의 HTML 렌더링

배열에 저장된 HTML 요소 (링크) 목록을 렌더링하려고합니다.배열 항목의 HTML 렌더링

내가 처음과 같은 배열을 구성하고있다 :

const availableSizes = product.simples.filter((value) => { 
     return value.stockStatus === STATUS_AVAILABLE; 
}).map((value, index) => { 
     return `${value.filterValue} `; 
});

배열 내용의 예 것은 : 내가 시도

["35 ", "36 ", "36.5 ", "37.5 ", "38 ", "39 ", "39.5 ", "40 ", "41 ", "41.5 ", "42 ", "42.5 ", "43 ", "44 ", "44.5 ", "45 ", "46 ", "46.5 ", "48 ", "49 "]

는 각 문자열과 같은 내장되는 방식을 수정 :

을

const availableSizes = product.simples.filter((value) => { 
     return value.stockStatus === STATUS_AVAILABLE; 
}).map((value, index) => { 
     return `<a href="#">${value.filterValue}</a>`; 
});

HTML은 이스케이프 처리되어 출력으로 직접 출력되지만 HTM으로 구문 분석되지 않습니다. L하지만 일반적인 문자열로.

링크를 렌더링해야 할뿐만 아니라 특정 작업 (예 : 쿠키 저장)을 수행하는 onClick 처리기가 있어야하므로 링크도 React로 처리해야합니다. 당신이 JSX

const availableSizes = product.simples.filter((value) => { 
    return value.stockStatus === STATUS_AVAILABLE; 
}).map((value, index) => { 
    return <a key={ index } href="#">{ value.filterValue }</a>; 
});

출처

2016-07-07 George Katsanos

jsx를 사용하고 있습니까? 그렇다면 'return {value.filterValue}'을 쓰지 않는 이유는 무엇입니까? –

나는 Yury가 말한대로이 일을 해결할 것이라고 확신한다. – Borjante

를 반환해야하지만 .map에서

출처

2016-07-07 10:04:33 ctrlplusb

지도에서 무언가를 반환하지 않고 JS 오류가 발생했다./ –

익명 함수 내에서 단일 표현식을 사용하면 결과가 암묵적으로 반환된다. – ctrlplusb

사실, 제 코드에서는 {} 표기법을 사용 했으므로 리턴을 기대합니다. –

당신은 당신이 JSX 사용할 수있는 것처럼 당신이 대신 다음을 수행 할 수 String 반환 :

class MyComponent extends React.Component { 
    render() { 
    const availableSizes = product.simples 
     .filter((value) => value.stockStatus === STATUS_AVAILABLE) 
     .map((value, index) => <a key={index} href="#">${value.filterValue}</a>); 

    return (
     <div> 
     {availableSizes} 
     </div> 
    ); 
    } 
}

에주의를 내가 추가 한 key={index}에. React는 렌더링 프로세스를 최적화하기 위해 이것을 필요로합니다. 각 제품에 고유 한 ID가있는 경우 더 나은 최적화를 위해 대신 사용할 수 있습니다. React의 diffing 알고리즘에 사용됩니다. 예 : <a key={value.id} href="#">${value.filterValue}</a>

출처

2016-07-07 10:03:32

배열 항목의 HTML 렌더링

답변

관련 문제