javascript - react js功能组件中的条件渲染
问题描述
我想在这个 TodoDisplay 组件中渲染两个组件( TodoDone 和 TodoRemaining )
默认渲染应该是 TodoRemaining 但不知何故应该有一个 onClick 处理程序来渲染 TodoDone 组件。
任何人都可以提出一种实现它的方法吗?
import React, { useState, useEffect } from "react";
import TodoRemaining from "../TodoRemaining/TodoRemaining";
import TodoDone from "../TodoDone/TodoDone";
import { DoneTodoProvider } from "../Context/DoneTodoContext";
const TodoDisplay = () => {
const [isPreview, setIsPreview] = useState(true);
if (isPreview) {
return (
<div>
<DoneTodoProvider>
<TodoRemaining />
</DoneTodoProvider>
</div>
);
} else {
return (
<DoneTodoProvider>
<TodoDone />
</DoneTodoProvider>
);
}
};
export default TodoDisplay;
解决方案
你可以这样做:
const TodoDisplay = () => {
const [isPreview, setIsPreview] = useState(true);
if (isPreview) {
return (
<div>
<DoneTodoProvider>
<TodoRemaining />
</DoneTodoProvider>
<Button onClick={() => setIsPreview(false)}>flip</Button>
</div>
);
} else {
return (
<DoneTodoProvider>
<TodoDone />
</DoneTodoProvider>
<Button onClick={() => setIsPreview(true)}>flip</Button>
);
}
};
export default TodoDisplay;
更清洁的方式:
return (
<div>
<DoneTodoProvider>
{isPreview?
<TodoRemaining />
:
<ToDoDone />
}
</DoneTodoProvider>
<Button onClick={() => setIsPreview(!isPreview)}>flip</Button>
</div>
);
推荐阅读
- r - 是否可以有一个没有下拉箭头的 SelectInput?
- algorithm - 动态规划 2 个城市搬运工的最大利润
- gremlin - 更新 gremlin-server 后的问题
- python - Numpy 数组追加更改其 dtype
- python - 尝试调整窗口大小时,Tkinter 和 cv2 冻结
- ios - Swift 数据转换为 UInt64
- dictionary - SWIFTUI 调用密钥字典不适用于错误:“密钥路径中的“() -> Bool”类型的下标索引必须是可散列的”
- docker - docker-compose 在 Ubuntu WSL 2 上找不到环境变量 $PWD
- javascript - 在 Rock Paper Scissors - Java Script 中显示相同的结果
- c++ - 子对象、包含对象、成员对象:差异?