使用 useState Hook 在功能组件中将 Render 道具与 Children 反应答案

【问题标题】：React Render prop with Children in a functional component with useState Hook使用 useState Hook 在功能组件中将 Render 道具与 Children 反应
【发布时间】：2019-02-11 15:37:59
【问题描述】：

我正在使用支持钩子的版本通过 Codesandbox 使用 Create-React-App。我正在尝试使用无状态功能组件和挂钩的较新 React 选项创建一个简单的切换。我使用儿童道具创建了一个渲染道具模式，但得到“儿童不是函数错误”。谷歌教授让我失望了。

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

【问题讨论】：

但是children[0] 应该是一个。

标签： javascript reactjs react-hooks

【解决方案1】：

<Toggle>
   <Toggle>

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

我不太确定您的目标是将 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;
};

【讨论】：

根本不打算嵌套切换，只是错过了，谢谢。