Reactjs React-子系统中组件的运行计数（例如脚注）

我有一个react组件，它表示一个带有文本和一些脚注的文档。文本应按如下方式呈现：

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

Here is another [3].

当我渲染我的组件时，我希望每次看到一个脚注时都计算出来，这样它就会递增。树可以有很多层，所以不能假设所有脚注都是主组件的直接子级

这也应该是动态的，以便添加引用更新计数

---

我想不出一个非常“反应”的方法来做这件事。上下文（尽管不受欢迎）似乎不是正确的事情，否则，您没有关于相邻组件的信息。

我想我会这样处理它

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

在容器或顶级组件中，创建用于保存脚注的数组。然后将此数组作为道具向下传递给可能呈现脚注的任何组件，以及必须在任何其他组件之后呈现的脚注呈现组件

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

const DocComponent=（）=>{
常量脚注=[]；
返回(
);
};

请注意，脚注数组必须通过道具沿层次结构向下传递到所有可能呈现脚注引用的组件。每次组件渲染脚注引用时，都会向数组中添加脚注，如下所示：

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

constsomecontent=（{footnotes}）=>{
footnotes.push（'这是脚注文本'）；
常量footnoteIndex=脚注长度；
返回（Hermansen和Shihipar等[{footnoteIndex}]
）；
};

当执行到达Footnotes组件时，相同的Footnotes数组实例将通过prop传递给它。在执行时，数组将填充所有需要显示的脚注。您可以直接渲染它们：

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

constfootnotes=（{Footnotes}）=>{
常量内部=脚注。地图（
（脚注，索引）=>（
[{index+1}]{footnote}
）；
返回（
{inner}
）；
}; 

此实现肯定与组件的呈现顺序相耦合。因此，渲染中的组件顺序应该与希望脚注出现的视觉顺序相匹配

---

下面是一个JSFIDLE-

您的数据结构是什么样子的？这似乎是应该与源数据一起整理的事情，因此组件只是呈现它们所提供的内容。我同意，可能会因为数据本身的预处理而停止。我正在寻找一个类似于React的解决方案，这样我就不必手动遍历树并更新所有节点。是否保存此文档？它不是变成了某种数据结构吗？你不能从中得到脚注数吗？它们是动态添加的吗？如果是这样，您可以在DOM层次结构中激发一个事件。您还可以使用redux存储所有脚注。谢谢，这确实是一种有趣的方法，但是通过树传递脚注是很困难的。我想这可以用一个类似于上下文的系统来完成，但它不会在每次渲染时都重置。对此众说纷纭。我总是错误地将变量显式地传递给组件，而其他人则喜欢在上下文中隐藏变量。你在乡下，宝贝。我说，是时候传递一些道具了。上下文系统：redux全局存储…：）使用Juan建议的存储也可以，尽管我喜欢将像您这样的案例（跟踪脚注）视为只需要存在于一次渲染范围内的数据。所以我更喜欢我的解决方案。