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

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 列中，我没有 <Image> 标记，因此无法为我显示图像链接的数据， 还有一栏是Action，在这一栏会有两个按钮，每个产品每一行的编辑和删除 如果我有很多数据，如何在app.js 文件中检索它

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

Answer 1

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

如果您知道它总是称为“图像”，您可以在列中搜索它，获取索引并在循环中使用它：

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