如何有条件地渲染 react.js 中的组件？

Question

我是 React 的新手，对于我的第一个项目，我正在尝试构建一个费用跟踪器，作者是Traversy Media在 YT 上的。

我想通过添加一个日期组件来稍微扩展项目。 我当前的输出如下所示：图 1

我想这样看：图片2 （我硬编码了这个输出）

基本上，我希望Date组件仅在不存在具有相同日期的其他组件时才重新渲染。 如果存在具有相同日期的组件，则输出应属于该组件。 我对问题的逻辑和条件渲染本身都感到困惑。

这是我到目前为止编写的代码：

 const TransactionList = () => { const {transactions} = useContext(GlobalContext) return( <div> <h3>History</h3> <ul className='list'> {transactions.map(transaction => ( <Transaction key={transaction.id} transaction={transaction}/> ))} </ul> <div> ) }

在上面的代码中，事务是一个数组，它将是全局上下文的初始状态。

组件事务代码如下：

 export const Transaction = ({transaction}) => { const { deleteTransaction } = useContext(GlobalContext) const sign = transaction.amount > 0 ? '+' : '-' return ( <div> <ExpenseDate date={transaction.date} /> <li className={transaction.amount > 0 ? 'plus' : 'minus' }> {transaction.text} <span>{sign}₹{Math.abs(transaction.amount)}</span> </li> </div> ) }

ExpenseDate的代码如下：

 function ExpenseDate(props){ const month = props.date.toLocaleString('en-US', {month: 'long'}) const year = props.date.getFullYear(); const day = props.date.getDate(); return ( <span className="expense-date"> <span >{day}</span> <span >{month}</span> <span >{year}</span> </span> ) }

我的猜测是条件渲染的第一步是删除ExpenseDate作为子级标签。 非常感谢您的帮助。 谢谢你 ：））

Answer 1

在这种情况下，您可以考虑采取的方法很少。

1. 将交易的结构更改为按日期分组，并在TransactionList中有另一个组件，它可以呈现ExpenseDate和Transaction组

2. 另一种方法是，如果日期是默认排序的，那么我们可以检查前一个日期是否与当前日期相同，并隐藏ExpenseDate组件。 https://codesandbox.io/s/tender-yonath-dy1pli-dy1pli?file=/src/components/TransactionList.js

第一种方法会更清晰，因为它清楚地定义了我们需要的形状的数据

Answer 2

有几种方法可以实现这一点，但最简单的方法是使用包含布尔值的状态来管理它。

所以你需要先从 React 中导入useState钩子：

import { useState} from "react";

然后你需要在你的父组件中设置一个状态并使用简单的 JavaScript 有条件地显示它。 在此示例中，状态默认设置为 false：

export default function ParentComponent() {
    const [showComponent, setShowComponent] = useState(false);
    return (
        <div>
            {showcomponent && <ChildComponent />}
        </div>
    )

}

要管理状态本身，您可以使用您的状态的方法。 在这种情况下，它被称为setShowComponent 。 让我们将它与一个按钮一起使用，该按钮分配了一个处理点击并将状态设置为true的函数：

export default function ParentComponent() {
    const [showComponent, setShowComponent] = useState(false);
    handleClick() {
        setShowComponent(true);
    }
    return (
        <div>
            {showcomponent && <ChildComponent />}
            <button onClick={handleClick}>Hide/Show</button>
        </div>
    )

}

这将呈现ChildComponent 。 当然，您可以应用任何类型的逻辑来有条件地显示组件。

管理状态的另一种方法是使用Redux 。 在这里，您可以找到有关 React 中状态和钩子的更多信息。

祝你好运。 👍

Answer 3

如果您查看以下代码，您可以了解如何执行此操作：

const date1 = new Date("Jun 30 2022");
const date2 = new Date("Jun 29 2022");

const transactions = [
  {
    title: "title1",
    date: date1
  },
  {
    title: "title2",
    date: date1
  },
  {
    title: "title3",
    date: date2
  },
  {
    title: "title4",
    date: date2
  }
];

function sortTransactions(transactions) {
  const sorted = {};

  transactions.forEach((transaction) => {
    const month = transaction.date.toLocaleString("en-US", { month: "long" });
    const year = transaction.date.getFullYear();
    const day = transaction.date.getDate();

    const key = `${day} ${month} ${year}`;
    const value = {
      title: transaction.title
    };

    if (sorted[key]) {
      sorted[key].push(value);
    } else {
      sorted[key] = [value];
    }
  });

  return sorted;
}

function App() {
  const sortedTransactions = sortTransactions(transactions);
  const dates = Object.keys(sortedTransactions);

  return (
    <div>
      {dates.map((date) => {
        return (
          <>
            <div>{date}</div>
            <ul>
              {sortedTransactions[date].map((transaction) => {
                return <li>{transaction.title}</li>;
              })}
            </ul>
          </>
        );
      })}
    </div>
  );
}

密码箱： https ://codesandbox.io/s/jolly-morse-nsb7c4