аюсь вернуть несколько элементов React из вспомогательного метода. Я мог бы решить это, просто переместив некоторый код, но мне интересно, есть ли более чистый способ решить это. У меня есть метод, который возвращает частьrender метод, и эта функция должна возвращать как элемент React, так и некоторый текст. Это понятнее на примере:

class Foo extends React.Component {
  _renderAuthor() {
    if (!this.props.author) {
      return null;
    }

    return [
      ' by ',
      <a href={getAuthorUrl(this.props.author)}>{this.props.author}</a>,
    ]; // Triggers warning: Each child in an array or iterator should have a unique "key" prop.

  render() {
    return (
      <div>
        {this.props.title}
        {this._renderAuthor()}
      </div>
    );
  }
}

Я знаюrender метод должен возвращать ровно 1 элемент React. Использование вспомогательного метода, подобного этому, вызовет предупреждение, а исправление предупреждения (путем добавления ключей) сделает код слишком запутанным. Есть ли чистый способ сделать это без предупреждения?

Редактировать:

Другой вариант использования:

render() {
  return (
    <div>
      {user
        ? <h2>{user.name}</h2>
          <p>{user.info}</p>
        : <p>User not found</p>}
    </div>
  );
}

Изменить 2:

Оказывается, это пока невозможно, я написал о 2 обходных решениях:https://www.wptutor.io/web/js/react-multiple-elements-without-wrapper