javascript - 使用条件语句设置react-router link prop会返回语法错误

Question

我正在尝试编写一个渲染函数，当传递正确的参数时，该函数在react-route组件上设置onlyActiveOnIndex={true}。

因此，我没有重复整个链接，而是尝试编写以下代码:

  render() {
    return (
      <div className={`navbar navbar-${this.props.linksData.length}`}>
        {this.props.linksData.map((linkData) => {
          return(
            <div className="navbar-link-container" key={linkData.to}>
              <Link
              activeClassName="navbar-active-link"
              {linkData.to === '/' ? onlyActiveOnIndex={true} : null}
              to={linkData.to}>
                <i className="navbar-icon material-icons">{linkData.icon}</i>
                <span className="navbar-link-text">{linkData.text}</span>
              </Link>
            </div>
          )
        })}
      </div>
    )
  }

但是我收到以下语法错误:

Syntax error: Unexpected token, expected ... (16:15)

在 react 组件上有条件地设置 Prop 的正确方法是什么(如果链接不指向索引路由，我根本不希望该属性存在)。

现在我编写了以下解决方法:

onlyActiveOnIndex={linkData.to === '/' ? true : false}

但是如果将来我想设置条件 Prop 怎么办？

Answer 1

这应该有效

<Link
  activeClassName="navbar-active-link"
  onlyActiveOnIndex={linkData.to === '/'}
  to={linkData.to}>
    <i className="navbar-icon material-icons">{linkData.icon}</i>
    <span className="navbar-link-text">{linkData.text}</span>
</Link>

至于你的可选 Prop 问题，类似这样的东西应该有效，

render() {
  let props = {}
  showName && (props.name = 'Tyler')
  showAge && (props.age = 27)

  return <MyComponent {...props} />
}

如果满足特定条件，您只需设置对象的属性，然后，您可以将该对象传播到您的组件中。