React - 어린이의 구성 요소 실행 횟수 (예 : 각주)

Question

텍스트 및 일부 각주가있는 문서를 나타내는 반응 요소가 있습니다. 텍스트는 다음과 같이 표현한다 : 내 구성 요소를 렌더링 해요으로

This the first footnote[1], this is the second[2]. 

Here is another [3]. 

, 나는이 증가 것 있도록 각주를 볼 때마다 시간을 계산합니다. 트리는 여러 단계로 깊을 수 있으므로 모든 각주가 주 구성 요소의 직접적인 하위라고 가정 할 수 없습니다.

또한 동적이어야하므로 참조를 추가하면 개수가 업데이트됩니다.

나는 이것을하는 매우 '반응'방식을 생각할 수 없다. 컨텍스트 (있는 그대로 눈살을 찌푸 듯)는 옳은 것처럼 보이지 않으며, 그렇지 않으면 인접한 구성 요소에 대한 정보가 없습니다. 당신의 용기 또는 최상위 구성 요소에서 나는 이런 식으로 처리 할 것이라고 생각

Answer 1

...

는 각주를 유지하는 배열을 만들 수 있습니다. 그런 다음이 배열을 각주를 렌더링 할 수있는 구성 요소와 다른 구성 요소 다음에 렌더링해야하는 각주 렌더링 구성 요소에 대한 보조로 전달합니다. 각주 배열이 각주에 대한 참조를 렌더링 할 수있는 모든 구성 요소에 소품을 통해 계층 구조를 계승해야한다는

는

const DocComponent =() => { 
    const footnotes = []; 
    return (
    <div> 
     <SomeContent footnotes={footnotes} /> 
     <SomeOtherContent footnotes={footnotes} /> 
     <EvenDifferentContent footnotes={footnotes} /> 
     <Footnotes footnotes={footnotes} /> 
    </div> 
); 
}; 

참고. 컴포넌트는 각주 참조 렌더링마다,과 같이 배열에 주석을 추가

const SomeContent = ({footnotes}) => { 
    footnotes.push('This is the footnote text.'); 
    const footnoteIndex = footnotes.length; 
    return (<p>Hermansen and Shihipar, et al [{footnoteIndex}]</p>); 
}; 

실행 각주 성분에 도착 동일한 각주 어레이 인스턴스 그것에 소품을 통해 전달된다. 실행 중이 시점에서 배열에는 표시해야하는 모든 각주가 채워집니다.

const Footnotes = ({footnotes}) => { 
    const inner = footnotes.map( 
    (footnote, index) => (<li>[{index+1}] {footnote}</li>)); 
    return (<ul>{inner}</ul>); 
}; 

이 구현은 확실히 구성 요소의 렌더링 순서와 결합되어 있습니다. 그래서 렌더링에서 구성 요소 순서는 각주에 표시 할 것 시각적 순서와 일치한다 여기

는 jsfiddle입니다 -. https://jsfiddle.net/69z2wepo/79222/