Question

我正在使用支持钩子的版本通过Codesandbox使用Create-React-App。我正在尝试使用无状态功能组件和挂钩的较新React选项创建一个简单的切换。我使用children prop创建了renderprop模式，但出现“ children不是函数错误”。 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具有另一个{Toggle}作为其children，因此这是引发异常的地方。内部的Toggle很好，因为它的children确实是一个函数，但是异常阻止了渲染到达那里。

我不太确定您的目标是在切换器中嵌套切换，因此解决方法是删除其中之一。另外，如果您打算允许非功能作为子代，则可以将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的功能组件中与子代反应Render道具

1 个答案: