外部元素的 JSX 条件修改

Question

我正在尝试做这样的事情：

render() {

  let a = <a className="nav-link" href={this.props.href} />

  if (this.props.hasCollapse) {

    a = <a className="nav-link"

           href={this.props.href}

           data-toggle="collapse"

           data-target={this.props.collapseId} />

  }

  return (

    {a}

      <i className="fas fa-fw fa-cog"></i>

      <span>{this.props.title}</span>

    {a}

)

}

其中{a}返回的 被hasCollapse属性确定的适当版本替换。我怎样才能做到这一点？

Answer 1

您应该更改链接的属性。例如function AwesomeLink({ collapseId, hasCollapse, href, title }) {&nbsp; let hrefProps = {};&nbsp; if (hasCollapse) {&nbsp; &nbsp; hrefProps = {&nbsp; &nbsp; &nbsp; 'data-toggle': 'collapse',&nbsp; &nbsp; &nbsp; 'data-target': collapseId,&nbsp; &nbsp; };&nbsp; }&nbsp; return (&nbsp; &nbsp; <a className='nav-link' href={href} {...hrefProps}>&nbsp; &nbsp; &nbsp; <i className='fas fa-fw fa-cog' />&nbsp; &nbsp; &nbsp; <span>{title}</span>&nbsp; &nbsp; </a>&nbsp; );}

Answer 2

我会用简单的条件来做到这一点：const Link = (props) => {&nbsp; &nbsp; return (<a className="nav-link"&nbsp;&nbsp; &nbsp; href={props.href}&nbsp; &nbsp; data-toggle={props.hasCollapse ? 'collapse' : null}&nbsp; &nbsp; data-target={props.hasCollapse ? props.collapseId : null}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <i className="fas fa-fw fa-cog"/>&nbsp; &nbsp; &nbsp; <span>{props.title}</span>&nbsp; &nbsp; </a>&nbsp; )}此外，您似乎正在设置用于 Bootstrap 或类似库的数据属性。您可能想要研究React Bootstrap并利用它们设计用于 React 的组件，而无需处理混乱的 DOM 操作。