在Ternary运算符中反应路由器<link />

时间:2018-06-09 08:11:49

标签: javascript reactjs react-router jsx ternary-operator

我想你在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>

当我在没有Ternary运算符的情况下使用这个JSX代码时,值也是正确的:

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

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

我做错了什么?

1 个答案:

答案 0 :(得分: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>

希望这有帮助。