javascript - 管理渲染 Prop 函数中的本地状态

Question

我需要将渲染 Prop 传递给第三方库。但我想在 render prop 函数中有一个内部状态。例如，假设我想切换渲染 Prop 的不透明度。

如果这是一个函数组件，我会使用钩子(Hook)(见下面代码的注释)，但我不知道如何处理列表中每个项目的状态。

我应该怎样做才能使切换正常工作？

// Third party I can't change.
function ThirdParty({ render, items }) {
  return items.map(i => render(i));
}

// My render prop.
function renderProp(val) {
  // const [toggle, setToggle] = React.useState(false);
  function handleClick() {
    console.log("not toggling");
    // setToggle(prev => !prev);
  }
  // const opacity = toggle ? 1 : 0;
  const opacity = 1;
  return (
    <div key={val} style={{ display: "flex", opacity }}>
      <button onClick={handleClick}>toggle</button>
      <div>Item {val}</div>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <ThirdParty render={renderProp} items={[1, 2, 3]} />
    </div>
  );
}

运行示例:https://codesandbox.io/s/falling-wood-xklyi

Answer 1

如果函数 renderProp 的名称大写，则可以使用钩子(Hook)。

修改后的代码笔用于演示:https://codesandbox.io/s/nifty-chandrasekhar-4p0fd

renderProp 是一个组件，因此应将其导出为大写的 RenderProp