javascript - react js功能组件中的条件渲染

Question

我想在这个 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;

Answer 1

你可以这样做:

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>
    );