React - 在兒童中運行組件的計數（例如，腳註）

我有一個反應組件，它表示一個包含文本和一些腳註的文檔。文本應呈現這樣的：React - 在兒童中運行組件的計數（例如，腳註）

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

Here is another [3].

，因爲我使我的組成部分，我希望每次我看到一個註腳，這樣它的遞增時間來算的。樹可以有多層次的深度，所以你不能假設所有的腳註都是主要組件的直接子節點。

這也應該是動態的，以便添加引用更新計數。

我想不出一個非常'Reacty'的做法。上下文（儘管它已經皺起了眉頭）似乎不是正確的，否則，你沒有關於相鄰組件的信息。

來源

2017-05-22 Thariq Shihipar

什麼是你的數據結構是什麼樣子？這看起來像應該與源數據一起整理的東西，所以組件只是渲染它們的東西。 – Aaron

我同意，可能會對數據本身進行預處理。我正在尋找一種類似於React的解決方案，以便我不必手動通過樹並更新所有這些節點。 –

你是否保存這份文件？它不會成爲一些數據結構嗎？你不能從中得到腳註計數嗎？它們是否被動態添加？如果是這樣，您可以在DOM層次結構中觸發一個事件。您還可以使用redux來存儲所有腳註。 –

我想我會處理這件事像這樣...

在容器中或頂級組件，創建控股腳註的數組。然後將這個數組作爲一個道具傳遞給任何可能渲染腳註的組件，還可以傳遞給一個腳註渲染組件，它必須在任何其他組件之後渲染。

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/

來源

2017-05-22 16:52:31

謝謝，這絕對是一個有趣的方法，但在樹上傳遞腳註很困難。它可以用像我想的系統這樣的上下文來完成，但是它不會在每個渲染上重置。 –

意見不一。我總是將錯誤顯式傳遞給組件，而其他人喜歡將變量放在上下文中。你在React Country，寶貝。我說，是時候通過一些道具了。 –

上下文系統：REDEX全球商店... :) –

React - 在兒童中運行組件的計數（例如，腳註）

回答

相關問題