根据文件类型显示图标
display icon based on file type
我想根据文件类型显示图标。从 我从 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 它。"
您可以尝试不使用匿名函数的代码,只需从 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 />
}
与第一个代码块相同
我想根据文件类型显示图标。从 我从 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 它。"
您可以尝试不使用匿名函数的代码,只需从 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 />
}
与第一个代码块相同