这种现象叫 Prop Drilling, 指的是在组件树中，父组件不得不往下传递某些 props 给子组件，但是其本身并不需要使用这些 props 的行为。
1. 使用 Context，Redux 等。不要使用 Legacy 的 Context API 。
2. 改善组件设计，避免多早的把 Render 逻辑拆分为 Component(这会导致 Drilling 程度的加重)，直到需要复用，再进行拆分。
3. 使用 Compound Component Pattern 等方式来进行组件设计，也可以避免这种情况。

什么是 Compund Component Pattern 呢，参考下面的代码形式：

```jsx

import React from "react";
import { Counter } from "./Counter";

function Usage() {
const handleChangeCounter = (count) => {
console.log("count", count);
};

return (
<Counter onChange={handleChangeCounter}>
<Counter.Decrement icon="minus" />
<Counter.Label>Counter</Counter.Label>
<Counter.Count max={10} />
<Counter.Increment icon="plus" />
</Counter>
);
}

export { Usage };

```