外部元素的 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 }) {

  let hrefProps = {};

  if (hasCollapse) {

    hrefProps = {

      'data-toggle': 'collapse',

      'data-target': collapseId,

    };

  }

  return (

    <a className='nav-link' href={href} {...hrefProps}>

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

      <span>{title}</span>

    </a>

  );

}

Answer 2

我会用简单的条件来做到这一点：

const Link = (props) => {

    return (<a className="nav-link" 

    href={props.href}

    data-toggle={props.hasCollapse ? 'collapse' : null}

    data-target={props.hasCollapse ? props.collapseId : null}

    >

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

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

    </a>

  )

}

此外，您似乎正在设置用于 Bootstrap 或类似库的数据属性。您可能想要研究React Bootstrap并利用它们设计用于 React 的组件，而无需处理混乱的 DOM 操作。