Làm cách nào để tránh thêm gói <div> trong React?

113

Hôm nay tôi đã bắt đầu học ReactJS và sau một giờ đối mặt với vấn đề này .. Tôi muốn chèn một thành phần có hai hàng bên trong một div trên trang. Một ví dụ đơn giản về những gì tôi đang làm bên dưới.

Tôi có một html:

<html>
..
  <div id="component-placeholder"></div>
..
</html>

Kết xuất chức năng như thế này:

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

Và bên dưới tôi đang gọi kết xuất:

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

HTML đã tạo trông giống như sau:

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

Vấn đề mà tôi không hài lòng lắm là React buộc tôi phải gói tất cả trong một div "DeadSimpleComponent". Cách giải quyết tốt nhất và đơn giản cho nó, không có thao tác DOM rõ ràng là gì?

CẬP NHẬT 28/7/2017: Những người bảo trì React đã thêm khả năng đó trong React 16 Beta 1

Kể từ React 16.2 , bạn có thể làm điều này:

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}
javascript  reactjs 
— Kirill Reznikov
nguồn
4
thực hành đặt tên hoàn hảo ;-)
— Kirill Reznikov
Tôi có thể xem tệp HTML của bạn không? Tôi đọc sai câu hỏi của bạn. Tôi có thể có một giải pháp khác.
— Louis93
Smth như thế này: jsfiddle.net/qawumm3v
— Kirill Reznikov
Bạn gặp vấn đề với một thành phần có một phần tử duy nhất? Có thật không?
— Dominic
Ý anh là gì? Tôi chỉ đang thử React, nó sẽ không phức tạp lắm .. Nhưng giới hạn có vẻ khó chịu.
— Kirill Reznikov

Câu trả lời:

142

Yêu cầu này đã bị loại bỏ trong phiên bản React (16.0)] 1 , vì vậy bây giờ bạn có thể tránh trình bao bọc đó.

Bạn có thể sử dụng React.Fragment để hiển thị danh sách các phần tử mà không cần tạo nút cha, ví dụ chính thức:

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

Thêm tại đây: Các mảnh vỡ

— Luger
nguồn
1
Tin tuyệt vời DmitryUlyanets. Có ngày phát hành dự kiến ​​nào không?
— Jonas Carlbaum
Nó được phát hành kể từ ngày 26 tháng 9 năm 2017, xem reactjs.org/blog/2017/09/26/react-v16.0.html
— Tom
56

Cập nhật 2017-12-05: React v16.2.0 hiện hỗ trợ đầy đủ việc hiển thị các phân đoạn với sự hỗ trợ được cải thiện để trả về nhiều phần tử con từ một phương thức kết xuất thành phần mà không chỉ định khóa trong phần con:

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

Nếu bạn đang sử dụng phiên bản React trước v16.2.0, bạn cũng có thể sử dụng <React.Fragment>...</React.Fragment>thay thế:

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

Nguyên:

React v16.0 đã giới thiệu việc trả về một mảng các phần tử trong phương thức kết xuất mà không cần gói nó trong một div: https://reactjs.org/blog/2017/09/26/react-v16.0.html

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Hiện tại, cần có khóa cho mỗi phần tử để tránh cảnh báo khóa nhưng điều này có thể được thay đổi trong các bản phát hành trong tương lai:

Trong tương lai, chúng tôi có thể sẽ thêm một cú pháp phân đoạn đặc biệt vào JSX mà không yêu cầu khóa.

— Tom
nguồn
Cú pháp viết tắt mới của <> </> rất tuyệt. Tuy nhiên, tôi vẫn có rất nhiều cảm giác lẫn lộn về nó.
— Thulani Chivandikwa
@ThulaniChivandikwa Bạn có phiền nói ra sự nghi ngờ của mình về cú pháp tốc ký không?
— Tom
1
Tôi nghĩ rằng nó thiên về khái niệm thẻ trống là kỳ quặc trong JSX và không trực quan lắm trừ khi bạn biết chính xác nó làm gì.
— Thulani Chivandikwa
7

Bạn có thể dùng:

render(){
    return (
        <React.Fragment>
           <div>Some data</div>
           <div>Som other data</div>
        </React.Fragment>
    )
}

Để biết thêm chi tiết, hãy tham khảo tài liệu này .

— Rolando Cintron
nguồn
3

Sử dụng [], thay vì () để bao gồm toàn bộ trả về.

render: function() {
  return[
    <div className="DeadSimpleComponent__time">10:23:12</div >
    <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
  ]
}
— Michael Cuneo
nguồn
1

Điều này vẫn được yêu cầu , NHƯNG React bây giờ đảm bảo tạo các phần tử mà không cần tạo thêm phần tử DOM.

Cần có thêm gói (thường là với cha div) vì createElementphương thức Reacts yêu cầu một typetham số là either a tag name string (such as 'div' or 'span'), a React component type (a class or a function). Nhưng đây là trước khi họ giới thiệu React Fragment.

Tham khảo tài liệu api MỚI này cho createElement

React.createElement : Tạo và trả về một phần tử React mới của kiểu đã cho. Đối số kiểu có thể là một chuỗi tên thẻ (chẳng hạn như 'div' hoặc 'span'), một loại thành phần React (một lớp hoặc một hàm) hoặc một loại phân đoạn React .

đây là ví dụ chính thức, Tham khảo React.Fragment .

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}
— nguyên tố
nguồn
0

Bạn sẽ không thể loại bỏ divyếu tố đó . React.render () cần trả về một nút DOM hợp lệ.

— Henrik Andersson
nguồn
các div bị bỏ qua, Knockout.JS cũng làm điều tương tự. có một div không có kiểu dáng ở phần bên ngoài của thành phần của bạn sẽ không ảnh hưởng gì.
— Chris Hawkes
16
@ChrisHawkes, không đồng ý. một div của trình bao bọc ảnh hưởng đến các bộ chọn css.
— Downhillski
Khi làm việc với các phần tử ngữ nghĩa mà bạn không muốn trở thành các thành phần hoàn toàn của React, điều này trở thành một vấn đề. Giả sử có một thẻ section với các phần tử đầu trang và chân trang, và giữa chúng có một google map-container, mà chúng tôi không muốn sử dụng trong React. Sau đó, sẽ rất tuyệt nếu có header như một thành phần React và Footer là một thành phần React, mà không cần phải bao gồm thêm div: s bên ngoài bên trong các thành phần React ... Đó là một thiết kế ngu ngốc, nếu bạn quan tâm đến html bạn đầu ra ...
— Jonas Carlbaum
0

Đây là một cách để hiển thị các thành phần "transculent":

import React from 'react'

const Show = (props) => {
  if (props.if || false) {
    return (<React.Fragment>{props.children}</React.Fragment>)
  }
  return '';
};

----


<Show if={yomama.so.biq}>
    <img src="https://yomama.so.biq">
    <h3>Yoamama</h3>
<Show>

nhập mô tả hình ảnh ở đây

— Ярослав Рахматуллин
nguồn
0

Cũng có cách giải quyết khác. Mã khối dưới đây tạo phân đoạn mà không cần đến React.Fragment.

return [1,2,3].map(i=>{
if(i===1) return <div key={i}>First item</div>
if(i===2) return <div key={i}>Second item</div>
return <div key={i}>Third item</div>
})
— erfan seidipoor
nguồn
0

Tôi biết câu hỏi này đã được trả lời, tất nhiên bạn có thể sử dụng React.Fragment không tạo một nút nhưng chúng ta hãy nhóm các thứ như một div.

Ngoài ra, nếu bạn muốn giải trí, bạn có thể triển khai (và học được nhiều điều) một chế độ React loại bỏ các div thừa và vì điều này, tôi thực sự muốn chia sẻ một video tuyệt vời về cách bạn có thể làm điều đó trên chính cơ sở mã phản ứng.

https://www.youtube.com/watch?v=aS41Y_eyNrU

Tất nhiên đây không phải là điều bạn sẽ làm trong thực tế nhưng đó là một cơ hội học tập tốt.

— Gabriel P.
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.