页面中的计数概念递归问题

Question

我有一个概念上的问题，我有一个非常简单且最小的代码框：

我想保留组件的 在我的页面中（每个组件）。 这些是我的组成部分。 （我正在使用preactect，但我们在这里确实在谈论功能）

function Element() {
  return " " //I'm not important
}
function Container() {
    //container is repeating my Element
    return <div>
            <Element />
            <Element />
            <Element />
            <Element />
           </div>   
}

我在页面中保留 element 和容器的计数仅在第一个（firstType = true）时，才能在组件中添加属性来跟踪计数。

我想这样做，因为这种类型的组件需要第一次渲染。 （＆lt; defs＆gt;对于SVG）

此高阶功能轻松地做到这一点

function Counter(Component) {
  let count = 0;
  return function (...props) {
   //this is for the purpose of the debugging
    return <>{++count} <Component {...props[0]} /> </>
  }
}

。

我可以通过 组件，因此我可以知道它的宽度和高度（我也可以通过对DOM节点和GetBbox调用的参考来做到这一点，但我希望我的应用程序在没有浏览器的情况下工作）。

我最好的选择是将组件转换为字符串，获取路径的点，然后使用PathCommander的服务器端GetBbox或其他一些SSR技术（如Phantomjs）来测量路径。

这一切都会很好地很好，但是再次在我的组件上运行rendertosticticstring时，组件 本身也通过rendertostaticstring被称为。我拥有的组件）。

这是因为这次，当我称我的组件函数时，我称其为只是为了测量即时的路径，不渲染< /strong>像我对正常react.render（）或正常的SSR渲染情况所做的那样进入页面中的组件。 因此，我需要将计数重置为0后进行渲染。因此，在页面上，它仍然可以正确地行动，但我在没有运气的情况下尝试了一切。

我真的想不出一个简单正确的解决方案，可以解决这个难题，如果有人有一些起始想法或一些有用的信息，请分享！ 在这里做了一个可以使用的代码和盒子（只需输入// rendertosticticstring即可使其停止工作（您必须手动重新加载或Autosave不会将计数重置为0（这是因为它不是在此处的SSR）。

Answer 1

一种技术可能是创建参考react.createelement并使用包装函数覆盖它，该功能会增加elementCount。

function App() {
  return <div>
    <p>Hello world</p>
    <p>Another paragraph and <span>here</span></p>
    <p>This is the sixth element, counting the outermost App</p>
  </div>
}

let elementCount = 0
const createElement = React.createElement
React.createElement = (...args) => {
  elementCount++
  return createElement(...args)
}

ReactDOM.render(<App/>, document.querySelector("#app"))
console.log("total elements", elementCount)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

total elements 6

这计算了六（6）个元素。

1. ＆lt; app＆gt;
2. ＆lt; div＆gt;
4. ＆lt; p＆gt;
5. 代码>＆lt; span＆gt;
6. ＆lt; p＆gt;这是第六个...

不确定它是否与rendertostaticstring一起使用。尝试一下，让我们知道。