你怎么知道哪个项目是图像或按钮

Question

我在 ReactJs 中传递图像道具时遇到问题

这是我的代码：component/Table/index。此组件用于 2 个表（订单和产品），所以我创建这样

import React from 'react';
import {Table, Image} from 'react-bootstrap';
import '../Table/index.css';
import Button from '../Button/index';

const TableItem = ({datas, columns}) => {
  return(
    <Table striped bordered hover>
      <thead>
        <tr> 
          {columns.map(name => <th>{name}</th>)}
        </tr>
      </thead>
      <tbody>
        <tr> 
          {datas.map(data => 
          <td>{data}</td>
          )}
        </tr>
      </tbody>
    </Table>
  );
}

export default TableItem;

我必须像这样从 app.js

导入该列的数据

 <TableItem columns={["No.", "Image", "Name", "Category", "Price", "Action"]} 
 datas={["1", "https://place-hold.it/100x150", "MIlk tea", "Milk tea", "100000", "button"]}
 />

正如你在上面看到的，我已经导入了所有列的数据，但有一个问题，在图像列中，我没有 <Image> 标签，因此无法为我显示数据图片 link、 并且我有 1 列是 Action，在这一列中将有 两个按钮 、为每个产品的每一行编辑和删除 如果我有很多数据，我如何在 app.js 文件

中检索它

我不知道解决这个问题，谁能帮帮我，这对我来说太难了，因为我对 ReactJs 还很陌生

Answer 1

问题是如何您知道哪个项目是图像或按钮。

如果您知道它始终是名为“Image”的那个，您可以在列中搜索它，获取索引并在循环中使用它：

const TableItem = ({datas, columns}) => {

  const imageColumnIndex = columns.indexOf('Image');
  const actionColumnIndex = columns.indexOf('Action');

  return(
    <Table striped bordered hover>
      <thead>
        <tr> 
          {columns.map(name => <th>{name}</th>)}
        </tr>
      </thead>
      <tbody>
        <tr> 
          {datas.map((data, index) => 
          <td>
            {index === actionColumnIndex ? (
              <React.Fragment>
                {data.includes('edit') && <button type="button">Edit</button>}
                {data.includes('delete') && <button type="button">Delete</button>}
              </React.Fragment>
            ) : (
              index === imageColumnIndex ? <img src={data}/> : data
            )}
          </td>
          )}
        </tr>
      </tbody>
    </Table>
  );
}

然后在您的 app.js 中，使用 edit 和 delete 作为按钮示例：

const columns = ["No.", "Image", "Name", "Category", "Price", "Action"];
const datas = ["1", "https://place-hold.it/100x150", "MIlk tea", "Milk tea", "100000", "edit,delete"];

return <TableItem columns={columns} datas={datas}/>

注意：如果您还没有看到 <condition? ? <true> : <false>，请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

你怎么知道哪个项目是图像或按钮

how you know which item is an image or button

reactjs

react-component