如何在react.js中有条件地渲染组件?

Question

我是React的新手，在我的第一个项目中，我试图建立一个费用跟踪器，由travymedia在YT。

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

我想让它看起来像这样:图2(我硬编码了这个输出)

基本上我想要日期组件只重新呈现当且仅当没有其他组件具有相同的日期存在。如果存在具有相同日期的组件，则输出应该落在它下面。我对问题的逻辑和条件渲染本身都感到困惑。

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

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

在上面的代码交易是一个数组将全局上下文的初始状态。

组件Transaction代码如下:

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

codesandbox:https://codesandbox.io/s/jolly-morse-nsb7c4