使用 useState Hook 在功能组件中使用 Children React Render 道具

Question

我正在使用支持挂钩的版本通过 Codesandbox 使用 Create-React-App。我正在尝试使用无状态功能组件和挂钩的较新 React 选项创建一个简单的切换。我使用 children prop 创建了一个 renderprop 模式，但得到的是 "children is not a function error"。 Google 教授让我失望了。

App.js

import React from "react";
import ReactDOM from "react-dom";
import Toggle from "./Toggle";
import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Toggle>
        <Toggle>
          {({ show, toggleShow }) => (
            <div>
              {show && <h1>Show Me</h1>}
              <button onClick={toggleShow}>Show / Hide</button>
            </div>
          )}
        </Toggle>
      </Toggle>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

和Toggle.js

import { useState } from "react";

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  return children({ show, toggleShow });
};

export default Toggle;

CodeSandbox

Answer 1

<Toggle>
   <Toggle>

外部 Toggle 的 children 另一个 Toggle 组件，因此这是抛出异常的地方。内部 Toggle 会很好，因为它的 children 确实是一个函数，但异常会阻止渲染到达那里。

我不太确定您的目标是将 Toggles 嵌套在 toggles 中，所以解决方法可能是只删除其中一个。或者，如果您打算允许非函数作为子项，那么您可以将 Toggle 组件修改为如下所示：

const Toggle = ({ children }) => {
  let [show, setShow] = useState(false);

  const toggleShow = () => setShow((show = !show));

  if (typeof children === 'function') {
    return children({ show, toggleShow });
  }
  return children;
};

使用 useState Hook 在功能组件中使用 Children React Render 道具

React Render prop with Children in a functional component with useState Hook

javascript

reactjs

react-hooks