Question

很简单。我有一个带有两个元素的渲染函数

render() {
  let elem1 = <div>Foo</div>;
  let elem2 = <div>Bar</div>;
  return(elem1 + elem2); // How do I render elem1 below elem2?
}

我希望输出等同于此

<div>
  Foo
</div>
<div>
  Bar
</div>

Answer 1

这样简单：

render() {
  let elem1 = <div>Foo</div>;
  let elem2 = <div>Bar</div>;
  return (
    <div>
      {elem1}
      {elem2}
    </div>
  );
}

您应该在here

中阅读并练习更多JSX

Answer 2

如果您使用的是React＆gt; 16.2您可以使用新的Fragment组件

  render() {
    let elem1 = <div>Foo</div>;
    let elem2 = <div>Bar</div>;
    return (
      <React.Fragment>
        {elem1}
        {elem2}
      <React.Fragment/>
  );
}

使用div的主要优点是它不会向页面添加任何元素，并且比返回数组更具可读性。

Answer 3

render() {
    let elements=new Array();
    elements.push(<div>Foo</div>);
    elements.push(<div>Bar</div>);
   return elements;
}

所以基本上你可以返回一些孩子。

Answer 4

您只需返回render方法中的两个元素，而不是声明它们并直接返回它们。喜欢这个

render() {
    return (
        <div>
            <div>Foo</div>
            <div>Bar</div>
        </div>
    )
}

Answer 5

扩展@ Martin上面的答案：如果你从最新版本的React开始，你应该尝试使用React.Fragment作为分组元素。以下是reactjs文档：https://reactjs.org/docs/fragments.html

React.Fragment的语法也较短，即<>{elements}</>。但是，对短语法的支持尚未完全可用。

以下是您尝试解决的问题的代码链接：https://codepen.io/bdevapatla/pen/QxaKEq

如何连接两个元素，然后在React中渲染它们？

5 个答案: