Nhãn 41 cột mốc 041 Milestones 0
Vấn đề mớiCó một câu hỏi về dự án này? Đăng ký một tài khoản GitHub miễn phí để mở một vấn đề và liên hệ với người bảo trì và cộng đồng của nó. Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Bằng cách nhấp vào Đăng ký đăng ký cho GitHub, bạn đồng ý với Điều khoản dịch vụ và tuyên bố quyền riêng tư của chúng tôi. Chúng tôi thỉnh thoảng gửi cho bạn các email liên quan đến tài khoản.
Đã có trên Github? đăng nhập vào tài khoản của bạn
Danh sách vấn đề
Protip! Theo dõi các cuộc thảo luận dài với ý kiến:> 50. Follow long discussions with comments:>50.
I'm using react-native-render-html
to render HTML article.
The goal is to scroll to next element [like Comment section, Next article...] after the article has finished the rendering.
But since it loads remote images, the height of the view depends on HTML elements, and the loading time depends on the network speed ...
Is there any method to know exact height of the view after finish rendering?
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học React.js
- React.js render HTML
React.js render HTML
- Trước tiên bạn cần hiểu render là gì? nói nôm na thì render là việc hiển thị nội dung lên trình duyệt. Nội dung có thể được viết từ HTML, Javascript hay PHP,... Kết quả cuối cùng là hiển thị nội dung đó trên trình duyệt cho người dùng sử dụng. Đó gọi là render.
- Với React.js thì nội dung layout bạn viết không phải nằm ở trang HTML, mà được viết bên trong file Javascript, file HTML chỉ là cầu nối giúp nội dung Javascript "liên kết" với trình duyệt.
- Trước tiên ta xét file
index.html
sau đây để hiểu rõ hơn React hoạt động ra sao nhé.
Hello React ReactDOM.render[Hello, React!
, document.getElementById['root'] ];
- Click chạy file này, trình duyệt sẽ cho ta kết quả sau:
- Ta thấy nội dung
được tạo từ code Javascript, và được truyền vào file HTML thông quaHello, React!
id="root"
, nội dung này sẽ được hiển thị ra trình duyệt. Đây là một hình thức render. - Ví dụ đơn giản là vậy, nhưng thực tế quá trình làm việc của React phức tạp hơn một chút, phần lớn thao tác xử lý đều nằm ở file Javascript, các bạn xem tiếp ví dụ bên dưới nhe.
Nội dung thư mục react-project
- Sau khi hoàn thành cài đặt React, ta sẽ được cấu trúc sau:
react-project
node_modules
- ...
public
- index.html
- ...
index.html
- src
- .gitignore
- package.json
- package-lock.json
- README.md
node_modules
chứa nội dung cài đặt, tất cả cài đặt sẽ được lưu tại đây, chúng ta không thao tác trong thư mục này nhé.React App
0 chứa tất cả các file input, đây là các file mà chúng ta sẽ code nội dung, thao tác phần lớn ở những file này, gồm các file Javascript, CSS,...- Các file khác chưa cần quan tâm nhé.
Cách React render nội dung HTML ra trình duyệt
Để hiểu rõ hơn về render trong React, ta xem xét nội dung 3 file:
React App
1React App
2React App
3
Để cho dễ hiểu, ta lần lượt viết lại nội dung các file như sau:
/puclic/index.html
React App
- Ta thấy file này không chứa bất kỳ nội dung nào hiển thị ngoài trình duyệt.
/src/App.js
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return []; } export default App;Hello, React!.
- Ta thấy đoạn code màu xanh bên trên chính là nội dung được hiển thị ngoài trình duyệt.
- File này liên kết với
React App
1 thông quaReact App
3:
/src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; //Load function App từ App.js import * as serviceWorker from './serviceWorker'; ReactDOM.render[, document.getElementById['root']]; serviceWorker.unregister[];
- Import thư viện React và ReactDOM:
React App
6React App
7 React App
8 import nội dung fileReact App
9import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
0 import nội dung fileHello, React!.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
1Hello, React!.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
2 render nội dung functionHello, React!.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
3 tớiHello, React!.
id="root"
Nội dung trên có nghĩa là file
React App
3 lấy nội dung từ function import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [3 của file]; } export default App;Hello, React!.
React App
2 render ra nội dung trả về id="root"
của file import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [9, sau đó hiển thị nội dung này ra trình duyệt.]; } export default App;Hello, React!.
- Nội dung hiển thị trình duyệt lúc này:
- Tới đây các bạn sẽ thắc mắc tại sao có thể liên kết được với file
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
9 trong khi bên trong fileHello, React!.
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
9 không chứa bất kỳ liên kết Javascript nào? Câu trả lời nằm fileHello, React!.
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; //Load function App từ App.js import * as serviceWorker from './serviceWorker'; ReactDOM.render[, document.getElementById['root']]; serviceWorker.unregister[];
2, nội dung file này được import trực tiếp bên trongReact App
3 đóng vai trò như một Route điều hướng, liên kết các file. - Tới đây nếu bạn vẫn chưa rõ thì tạm thời gác cách hoạt động trên ra một bên, sau này quay lại cũng chưa muộn, cái quan trọng là nội dung React sẽ được viết từ file
React App
2, do đó khi chạy fileimport React from 'react'; import logo from './logo.svg'; import './App.css'; function App[] { return [
9 thì nội dung sẽ được render.Hello, React!.