如何将自定义组件附加为字符串 React

Question

这是我学习 React 的第二天第一天，我遇到了可以用更好的方式解决的问题，但我不知道它是如何在 React 中完成的。

import ExpenseItem from './ExpenseItem';
import './Expenses.css';

function Expenses(props) {
  const { items } = props;
  // const html = items
  //   .map(el => {
  //     return `
  //     <ExpenseItem
  //       title={${el.title}}
  //       amount={${el.amount}}
  //       date={${el.date}}
  //     ></ExpenseItem>`;
  //   })
  //   .join('');
  // console.log(html);

  return (
    <div className="expenses">
      <ExpenseItem
        title={items[0].title}
        amount={items[0].amount}
        date={items[0].date}
      />
      <ExpenseItem
        title={items[1].title}
        amount={items[1].amount}
        date={items[1].date}
      />
      <ExpenseItem
        title={items[2].title}
        amount={items[2].amount}
        date={items[2].date}
      />
      <ExpenseItem
        title={items[3].title}
        amount={items[3].amount}
        date={items[3].date}
      />
    </div>
  );
}

export default Expenses;

原来如此。我正在硬编码 4 个自定义组件，因为那是 props.items 数组的长度。

我注释掉的代码将根据项目数组的长度创建模板文字，因此我将为每个项目创建组件。没关系，但问题来了。

我不知道如何将它附加到类名为“费用”的 div 中。

这是我遇到的问题。

提前感谢您的回答。

Answer 1

您可以映射items 数组作为回报，它将为数组中的所有项目呈现ExpenseItem。

试试这样的：-

import ExpenseItem from './ExpenseItem';
import './Expenses.css';

function Expenses(props) {
  const { items } = props;

  return (
    <div className="expenses">
      {items.map((item, index) => (
        <ExpenseItem
          key={item.id || index}
          title={item.title}
          amount={item.amount}
          date={item.date}
        />
      ))}
    </div>
  );
}

export default Expenses;