这可能是由于react中的条件渲染所引起的。如果三元表达式的两个值都是组件,那么只有当表达式求值为true时才会呈现渲染的组件。但是,当您从先前的组件返回时,它将保留上一个状态,所以如果三元表达式求值为false,那么渲染的组件将是先前的组件而不是您期望的那个。
解决这个问题的一种方法是使用条件渲染的替代方法。如果您希望根据某些条件来渲染组件,您可以使用if/else语句或switch语句来实现。这些条件语句不仅可以更清晰地传达您代码的意图,而且还可以方便地处理边缘情况。
以下是使用if/else语句处理条件渲染的示例代码:
function MyComponent(props) {
const [showComponent, setShowComponent] = useState(false);
const handleClick = () => {
setShowComponent(!showComponent);
};
return (
<>
{showComponent ? (
) : (
)}
>
);
}
在此示例中,我们在组件中使用了一个状态变量来存储用户是否要呈现第一个组件。在点击按钮后,我们使用setShowComponent将该状态变量切换为相反的值。然后,我们使用条件逻辑呈现要显示的组件。如果showComponent为true,则我们呈现ComponentOne,否则呈现ComponentTwo。
请注意,如果您知道在列出组件的情况下将要呈现哪些组件,那么最好使用switch语句,因为它可以提供更清晰和可读的代码。
希望这能帮助您解决呈现不正确的问题。
上一篇:按钮点击后计数器不增加。
下一篇:按钮点击后刷新页面(确定/取消)