Question

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

如果这是一个功能组件，我会使用钩子（见以下代码的注释），但是我不知道如何处理列表中每个项目的状态。 / p>

我应该怎么做才能使拨动开关起作用？

// 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的名称大写，则可以使用钩子。

经修改的演示代码：https://codesandbox.io/s/nifty-chandrasekhar-4p0fd

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

在渲染道具功能中管理本地状态

1 个答案: