在带有useState钩子的功能组件中对子对象进行React呈现属性
在带有useState钩子的功能组件中对子对象进行React呈现属性
提问于 2019-01-26 05:59:03
我通过Codesandbox使用了一个支持钩子的Create-React-App。我正在尝试使用新的无状态功能组件和钩子的React选项来创建一个简单的切换。我创建了一个使用子代属性的renderprop模式，但是得到了一个“子代不是函数错误”。谷歌教授让我不及格。
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;回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-26 06:11:49
<Toggle>
<Toggle>外部切换有另一个切换组件作为其children，所以这就是抛出异常的地方。内部切换会很好，因为它的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;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54373348
复制相关文章
相似问题
腾讯云开发者
