我希望您在 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 标记时也遇到同样的问题。
我做错了什么?
最佳答案
你的语法不正确。您应该像这样重写 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>
希望这有帮助。
关于javascript - 在三元运算符中 React Router <Link>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50772237/