Làm cách nào để hiển thị các phần tử anh chị em mà không cần gói chúng trong thẻ cha?

Trong hầu hết các trường hợp, có thẻ mẹ không phải là một vấn đề.

React.createClass({
    render: function() {
        return (
            <tbody>
                <tr><td>Item 1</td></tr>
                <tr><td>Item 2</td></tr>
            </tbody>
        );
    }
});

Nhưng có một số trường hợp có ý nghĩa khi có các phần tử anh chị em trong một hàm hiển thị mà không có phần tử cha, và đặc biệt trong trường hợp bảng, bạn không muốn bọc một hàng bảng trong một div.

React.createClass({
    render: function() {
        return (
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
        );
    }
});

Ví dụ thứ hai cung cấp cho các lỗi sau: Adjacent XJS elements must be wrapped in an enclosing tag while parsing file.

Làm cách nào để tôi có thể hiển thị hai phần tử anh em mà không bao bọc chúng trong một <div>hoặc một cái gì đó tương tự?

Đây là một hạn chế hiện tại, nhưng có thể sẽ được khắc phục vào một thời điểm nào đó trong tương lai ( có một số vấn đề còn mở trên github repo ).

Hiện tại, bạn có thể sử dụng một hàm trả về một mảng (về cơ bản đây là một thành phần không trạng thái):

function things(arg, onWhatever){
    return [
        <tr><td>Item 1</td></tr>,
        <tr><td>Item 2</td></tr>
    ];
}

Và sử dụng nó trong thành phần của bạn.

return (
    <table><tbody>
      {things(arg1, this.handleWhatever)}
      {things(arg2, this.handleWhatever)}
    </tbody></table>
);

Cập nhật

Trong React 16, bạn sẽ có thể trả về một mảng từ kết xuất.

Cập nhật khác

Bây giờ bạn có thể trả về một mảng cấp cao nhất hoặc sử dụng <React.Fragment>.

Với một mảng, chúng ta cần đặt một khóa trên mỗi mục, vì React không biết rằng hai phần tử là không đổi, thay vì một danh sách được tạo động:

function RowPair() {
  return [
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]
}

Với React.Fragment, nó hoạt động giống như gói nó trong một <div>hoặc tương tự, nơi keykhông bắt buộc phải có nếu chúng ta không xây dựng các con một cách năng động. Đầu tiên, chúng ta có thể bọc mảng trong một Fragment:

function RowPair() {
  return <React.Fragment>{[
    <tr key="first"><td>First</td></tr>,
    <tr key="second"><td>Second</td></tr>,
  ]}</React.Fragment>
}

Và sau đó chúng ta có thể loại bỏ keyhoàn toàn mảng và s:

function RowPair() {
  return <React.Fragment>
    <tr><td>First</td></tr>
    <tr><td>Second</td></tr>
  </React.Fragment>
}

Tôi biết đây là một bài viết cũ, nhưng có lẽ câu trả lời của tôi có thể giúp ích cho những người mới như tôi.

Trong React 16.2, hỗ trợ được cải thiện cho Fragment đã được thêm vào.

Bây giờ bạn có thể trả lại nó như thế này:

return (
  <>
    <tr><td>Item 1</td></tr>
    <tr><td>Item 2</td></tr>
  </>
);

Bạn có thể bọc nó bằng <></>hoặc<Fragment></Fragment> .

Nếu bạn muốn chuyển một số thuộc tính, chỉ có khóa được hỗ trợ tại thời điểm viết bài và bạn sẽ phải sử dụng <Fragment />vì cú pháp ngắn<></> không chấp nhận các thuộc tính.

Lưu ý: Nếu bạn định sử dụng cú pháp ngắn, hãy đảm bảo rằng bạn đang sử dụng Babel 7 .

Nguồn tham khảo

Tuyệt vời! Nhóm React cuối cùng đã thêm tính năng này. Đối với React v16.0, bạn có thể làm:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
      <tr key="a"><td>Item 1</td></tr>,
      <tr key="b"><td>Item 2</td></tr>
  ];
}

Xem bài đăng trên blog đầy đủ giải thích "Các loại trả lại kết xuất mới: mảnh và chuỗi" tại đây .

Có một phần tử cha là hữu ích trong hầu hết các trường hợp, chẳng hạn như bạn có thể có một className cha có thể nhắm mục tiêu kiểu phần tử con và một vài trường hợp khác ...

Tuy nhiên, nếu bạn thực sự không muốn làm điều đó, bạn có thể sử dụng React.Fragment

Vì vậy, chỉ cần làm một cái gì đó như sau:

<React.Fragment>
  <First />
  <Second />
  <Third />
</React.Fragment>

Từ phiên bản 16.2 , có một phiên bản rút gọn cũng được sử dụng <>, trông giống như thế này trong chức năng kết xuất:

render() {
  return (
    <>
      <First />
      <Second />
      <Third />
    </>
  );
}

Ngoài ra, nếu sử dụng phiên bản 16.0 trở lên, bạn có thể trả về mảng các phần tử không cần trình bao bọc chính như bên dưới:

render() {
 return [
  <h1 key="heading">Hello from Alireza!</h1>,
  <p key="first">Here where I'm!</p>,
  <p key="second">And again here :)</p>
 ];
}

Bạn có thể quấn nó vào dấu ngoặc như sau:

React.createClass({
    render: function() {
        return (
          [
            <tr><td>Item 1</td></tr>
            <tr><td>Item 2</td></tr>
          ]
        );
    }
});

Ví dụ này hoạt động tốt đối với tôi:

let values = [];

if (props.Values){
  values = [
    <tr key={1}>
      <td>props.Values[0].SomeValue</td>
    </tr>
  ,
    <tr key={2}>
        <td>props.Values[1].SomeValue</td>
        </tr>
    ];
}

return (
    <table className="no-border-table table">
      <tbody>
        <tr>
            <th>Some text</th>
        </tr>
        {values}
      </tbody>
    </table>
)

Một cái gì đó giống như cú pháp này đã làm việc cho tôi

this.props.map((data,index)=>{return( [ <tr>....</tr>,<tr>....</tr>];)});

Đối với những người sử dụng TypeScript, cú pháp chính xác là:

return [
  (
    <div>Foo</div>
  ),
  (
    <div>Bar</div>
  )
];