我想在这个 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>
);
关于javascript - react js功能组件中的条件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62935137/