Javascript 使用条件语句设置react router link prop将返回语法错误

我正在尝试编写一个呈现函数，当传递正确的参数时，该函数仅在react路由组件上设置yActiveOnIndex={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>
    )
  }

但是如果将来我想设置条件道具呢？

这应该可以

<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>

{linkData.icon}
{linkData.text}

至于你的可选道具问题，像这样的问题应该可以解决

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

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

render（）{
设props={}
showName&（props.name='Tyler'）
展示和（道具年龄=27）
回来
}

---

如果满足某个条件，则只在对象上设置属性，然后可以将该对象扩展到组件中。

我想您可以编写条件组件而不是条件道具。类似于

{linkData.to=='/'？：}

。它带来了更多的冗长，但这是我知道的实现您所需的唯一方法。另一种方法是使用

…

扩展运算符。它可以工作，并且比我以前的解决方法更优雅。在这个用例中，它是我所需要的一切-但问题仍然存在，我是否可以设置可选属性，以防我只需要传递在控制器组件中定义的道具（因此，如果道具为null，则根本不设置道具）@MihaŠušteršIč编辑我的答案来回答您的问题。

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

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