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.