这个问题很可能是因为您更改了顶部documentElement的--children-count CSS变量的值，从而影响了文档中的所有组件。
如果你想要每个组件1个值，那么简单地把它应用到所述组件的元素上，参见例如如何在动态组件中的动态CSS类上应用CSS变量
如果使用styled-components，还可以使用基于属性的样式调整（而不是CSS变量）。

如果您需要在多个组件之间同步公共数据，* 将状态向上拉！* 在本例中，将状态向上拉到上下文中（除非您想使用props来管理它）。
下面是一个代码箱：https://codesandbox.io/s/nervous-lalande-wjpdgb
它的关键部分是处理共享状态的上下文提供程序

function ChildCounterContextProvider({ children }) {
  const [count, setCount] = useState(0);
  const value = useMemo(() => ({ count, setCount }), [count])

  useEffect(() => {
    // Handle changes to number of children here
    document.documentElement.style.setProperty('--children-count', count);
  }, [count]);

  return <ChildCounterContext.Provider value={value}>
    {children}
  </ChildCounterContext.Provider>
}

......以及上下文使用者，后者将向它写入内容。

const useChildCounter = () => useContext(ChildCounterContext);
function MyComponentWithChildren({ children }) {
  const childrenCount = React.Children.count(children);
  const childCounter = useChildCounter();
  useEffect(() => {
    // Add when enters
    childCounter.setCount(n => n+childrenCount);
    // Deduct when exits
    return () => childCounter.setCount(n => n-childrenCount);
  }, [childrenCount, childCounter]);

  return <p>I have {childrenCount} children out of {childCounter.count}</p>
}

效果将确保计数始终同步。