JSX对外部元素的条件修改

Question

I'm trying to do something like this:

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}

)

}

where the {a} in the return is replaced by the appropriate version as determined by the hasCollapse property. How might I achieve this?

Answer 1

You should change the properties for the link. For example

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

I would do this with simple conditionals:

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

Also, it looks like you're setting data properties for usage with Bootstrap or a similar library. You may want to look into React Bootstrap and make use of their components designed to be used in React without dealing with messy DOM manipulation.