在没有包装器元素的方法中返回多个React元素

Question

我正在尝试从辅助方法返回多个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

Answer 1

错误消息告诉您如何解决此问题:

数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.

而不是这个:

return [
  ' by ',
  <a href={getAuthorUrl(this.props.author)}>{this.props.author}</a>,
];

做这个:

return [
  <span key="by"> by </span>,
  <a key="author" href={getAuthorUrl(this.props.author)}>{this.props.author}</a>,
];

是的,您需要在一个范围中包装文本节点("by")以便为其提供密钥.这就是休息时间.正如你所看到的,我只是给每个元素一个静态key,因为它们没有任何动态.你也可以使用key="1",key="2"如果你想的话.

或者,你可以这样做:

return <span> by <a href={getAuthorUrl(this.props.author)}>{this.props.author}</a></span>;

......不需要keys.

以下是工作片段中的前一个解决方案:

const getAuthorUrl = author => `/${author.toLowerCase()}`;

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

    return [
      <span key="by"> by </span>,
      <a key="author" href={getAuthorUrl(this.props.author)}>{this.props.author}</a>,
    ];
  }

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

ReactDOM.render(<Foo datePosted="Today" author="Me"/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Answer 2

如果没有某种解决方法（例如将所有内容包装在另一个组件中），当前不可能做到这一点，因为它最终会导致底层的React代码试图返回多个对象。

请参阅这个活跃的Github问题，尽管正在考虑为将来的版本提供支持。

编辑：您现在可以在React 16中使用片段执行此操作，请参阅：https： //reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Answer 3

使用片段组件添加了支持。这是一流的组件。

因此，您现在可以使用：

render() {
  return (   
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

有关更多信息，请访问：https : //reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html