在三元运算符中反应路由器 <Link>

Question

我希望你在 React JSX 中使用以下三元运算符：

<Table.Cell>{`${user.company !== null ?  <Link to={`/companies/${user.company._id}`}>`${user.company.name}`</Link> : '' }`}</Table.Cell>

但我得到以下值显示：[object Object]

当我使用这个三元运算符时，值显示正确：

<Table.Cell>{`${user.company !== null ? `${user.company.name}` : '' }`}</Table.Cell>

当我使用这个没有三元运算符的 JSX 代码时，值也是正确的：

<Table.Cell><Link to={`/companies/${ user.company._id}`}>{user.company.name_company}</Link></Table.Cell>

但是，我想使用条件 React Router Link 标签来创建超链接。在三元运算符中使用其他 HTML 标记时，我遇到了同样的问题。

我做错了什么？

Answer 1

您的语法不正确。你应该像这样在 JSX 中重写你的三元检查：

<Table.Cell>{ user.company !== null ?  <Link to={`/companies/${user.company._id}`}>{user.company.name}</Link> : null }</Table.Cell>

或者你可以这样检查：

<Table.Cell>{ user.company !== null && <Link to={`/companies/${user.company._id}`}>{user.company.name}</Link> || null }</Table.Cell>

希望这会有所帮助。