React - 子组件的运行计数（例如脚注）答案

【问题标题】：React - Running count of components in children (e.g. for footnotes)React - 子组件的运行计数（例如脚注）
【发布时间】：2017-05-22 16:28:09
【问题描述】：

我有一个反应组件，它代表一个带有文本和一些脚注的文档。文本应该像这样呈现：

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

Here is another [3].

当我渲染我的组件时，我想在每次看到脚注时进行计数，以便它递增。树可以有很多层深，因此您不能假设所有脚注都是主要组件的直接子级。

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

我想不出一种非常“反应灵敏”的方式来做到这一点。上下文（尽管令人不悦）似乎不是正确的事情，否则，您将无法获得有关相邻组件的信息。

【问题讨论】：

你的数据结构是什么样的？这似乎是应该与源数据一起整理的那种东西，所以组件只是呈现它们所给定的内容。
我同意，可能会对数据本身进行预处理。我一直在寻找类似 React 的解决方案，这样我就不必手动遍历树并更新所有这些节点。
您正在保存此文档吗？它不会变成某种数据结构吗？你不能从中得到脚注吗？它们是动态添加的吗？如果是这样，您可以在 DOM 层次结构中触发一个事件。你也可以使用 redux 来存储你所有的脚注。

标签： reactjs footnotes

【解决方案1】：

我想我会这样处理......

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

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

请注意，脚注数组必须通过 props 向下传递到所有可以呈现脚注引用的组件。每次组件渲染脚注引用时，它都会向数组添加一个脚注，如下所示：

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

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

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

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

这是一个 jsfiddle - https://jsfiddle.net/69z2wepo/79222/

【讨论】：

谢谢，这绝对是一个有趣的方法，但是通过树传递脚注是困难的。我想它可以用像系统这样的上下文来完成，但它不会在每次渲染时都重置。
对此意见不一。我总是在将变量显式传递给组件方面犯错，而其他人则喜欢将变量隐藏在上下文中。你在 React Country，宝贝。我说，是时候传递一些道具了。
上下文系统：redux 全局存储... :)
使用像 Juan 建议的商店也很好，尽管我喜欢将像你这样的案例（跟踪脚注）视为只需要存在于一个渲染范围内的数据。所以我更喜欢我的解决方案。