Responsive trong ReactJS

Hi ! Hoàng đang có 2 class render A và B viết bằng ReactJS. Hoàng phải làm sao để màn hình PC 1200px thì class A sẽ được hiển thị ra trình duyệt còn nếu trên mobile 700px thì class B sẽ được render.
Cảm ơn cả nhà đã giúp đỡ Hoàng 🙆

file A.js

import React, { Component } from 'react';
class A extends Component {

}
    render() {
        return (
            <div>
               Đây là component
           dành cho PC
            </div>
        );
    }
}
export default A;

file B.js

import React, { Component } from 'react';
 class B extends Component {
    }
        render() {
            return (
                <h1>
                   Đây là component
                 dành cho mobile
                </h1>
            );
        }
    }
    export default B;

file index.js

import React from 'react';
import ReactDOM from 'react-dom';
import A from './A.js';
import B from './B.js';

ReactDOM.render(
    <A />
    <B /> ,
   document.getElementById('root')
);

file index.html

<html>
<head>
</head>
<body>
  <div id="root"></div>
</body>
</html>
1 Like

Keyword: responsive reactjs :sunglasses:. Nói chung, cái này liên quan đến CSS là chủ yếu, ngoài ra cũng có liên quan đến HTML, ví dụ như: Cắt giảm những thứ hiển thị lên mobile,…

3 Likes

@HR16 CSS không được bạn ơi. VD : trên PC thì render ra thẻ <div còn trên mobile thì render ra thẻ <h1 chứ không phải style khác nhau ! trên mobile và PC khác nhau hoàn toàn về các thẻ HTML luôn í

Ủa giống nhau mà :thinking: ? Quan trọng là biết sắp xếp, tối ưu (đặc biệt là về CSS) ra sao cho phù hợp thôi. Mà bạn thử check source code khi hiển thị trên mobile chưa? Làm gì có chuyện vô lý là DOM elements trên điện thoại và PC lại khác nhau được, cả hai đều theo một tiêu chuẩn chung mà? Về vấn đề bạn nói ở trên thì có hai cách:

  1. Lấy kích cỡ màn hình, cách làm: https://stackoverflow.com/a/3437825

  2. Dùng user-agent để tìm xem thiết bị hiện tại là gì, cách làm: https://stackoverflow.com/a/3540295

4 Likes

@HR16 Đúng là mình làm hơi lạ đời thật :grin:, nhưng mình muốn trên PC với trên điện thoại hiển thị tag html và nội dung cũng khác nhau. Không biết có cách nào làm được không nhỉ ? web cùng một domain luôn không phải dạng như mypage.com hay m.mypage.com

1 Like

Mình đã có giải thích cách làm như trên rồi, trong trường hợp của bạn thì nên dùng cách 2. Lưu ý là cách 2 ở trên là check user-agent trên trình duyệt, đối với trường hợp của bạn thì nên check user-agent trên server. Cụ thể: Khi user vào trang web, gửi GET request lên server thì server sẽ check user-agent trong header của request mà client gửi lên rồi căn cứ vào đó gửi A.js hoặc B.js (User-agent được trình duyệt tự động gửi lên, tương tự như cookies).

Dành cho bạn chưa biết về User-agent là gì thì về cơ bản trong trường hợp này có thể hiểu đó là một chuỗi chứa các thông tin về tên và phiên bản của trình duyệt mà bạn đang sử dụng, tên và phiên bản của hệ điều hành của máy bạn,… Chi tiết bên dưới:


P/s: Người ta thường tách web dành cho PC và mobile là để dễ quản lí hơn, đặc biệt là đối với các project lớn, những project mà web trên PC và mobile được làm riêng.

6 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?