根据文件类型显示图标

Question

我想根据文件类型显示图标。从 我从 strapi 获取的对象中，我可以获得文件扩展名 。但我想在 table.

上动态渲染它

const TableData = () => {
  const [data, setData] = useState([]);

  const getData = () => {
    axios.get("http://localhost:1337/document-uploads").then((response) => {
      console.log(response);
      const myData = response.data;
      setData(myData);
    });
  };

  useEffect(() => getData(), []);

  return (
    <div className="my-5">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Icon</th>
            <th>File Name</th>
            <th>Description</th>
            <th>Author</th>
            <th>Date created</th>
          </tr>
        </thead>
        <tbody>
          {data &&
            data.map((file: File) => (
              <tr key={file.id}>
                <td>
                  {() => {
                    if (file.document.ext == ".pdf") {
                      return <img src={PDF} />;
                    } else if (file.document.ext == ".xml") {
                      return <XML />;
                    } else {
                      return <JPEG />;
                    }
                  }}
                </td>
                <td>{file.document.name}</td>
                <td>{file.description}</td>
                <td>{file.author}</td>
                <td>{file.created_at}</td>
              </tr>
            ))}
        </tbody>
      </Table>
    </div>
  );
};

export default TableData;

我收到错误：“警告：函数 作为 React 子组件无效 。如果您 return 一个组件而不是来自渲染，则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。"

Answer 1

您可以尝试不使用匿名函数的代码，只需从 if 语句开始，不要将所有内容都包含在函数中。

                   {
                    if (file.document.ext == ".pdf") {
                      return <img src={PDF} />;
                    } else if (file.document.ext == ".xml") {
                      return <XML />;
                    } else {
                      return <JPEG />;
                    }
                  }

您也可以尝试使用更现代的 javascript 和三元运算符的不同方法：

                   {
                    file.document.ext == ".pdf" ? <img src={PDF} /> : 
                    file.document.ext == ".xml" ? <XML /> : <JPEG />
                   }

与第一个代码块相同

根据文件类型显示图标

display icon based on file type

reactjs

axios

rendering