2. Thực hiện Dynamic import (ok)

C:\Users\Administrator\Desktop\fusejs\test.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>Bước 1: Thực hiện component Header</h2>
	<pre>
		IndexPage
		const styles = {
		  a: {
		    marginRight: 10,
		  }
		}
	</pre>
	<h2>Bước 2: Thực hiện dynamic header1, header2, header3, header4, header5</h2>
	<pre>
		const DynamicComponent1 = dynamic(() => import('./../components/hello1'));
		const DynamicComponent2 = dynamic(() => import('./../components/hello2'));
		const DynamicComponent3 = dynamic(() => import('./../components/hello3'));
		const DynamicComponent4 = dynamic(() => import('./../components/hello4'));
		const DynamicComponent5 = dynamic(() => import('./../components/hello5'));
		export default function Hello1() {
		  return <p>Hello World 1 (imported dynamically) </p>
		}
	</pre>
</body>
</html>

C:\Users\Administrator\Desktop\fusejs\pages\index.js

import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import Header from '../components/Header';
const DynamicComponent1 = dynamic(() => import('./../components/hello1'));
const DynamicComponent2 = dynamic(() => import('./../components/hello2'));
const DynamicComponent3 = dynamic(() => import('./../components/hello3'));
const DynamicComponent4 = dynamic(() => import('./../components/hello4'));
const DynamicComponent5 = dynamic(() => import('./../components/hello5'));
const IndexPage = () => {
  const [falsyField] = useState(false);
  const [showMore, setShowMore] = useState(false);
  return (
    <div>
      <Header />
      <DynamicComponent1 />
      <DynamicComponent2 />
      <DynamicComponent3 />
      {falsyField && <DynamicComponent4 />}
      <button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
      {showMore && <DynamicComponent5 />}
    </div>
  )
}

export default IndexPage;

C:\Users\Administrator\Desktop\fusejs\components\Header.js

import React from 'react';
import Link from 'next/link';
const styles = {
  a: {
    marginRight: 10,
  }
}
function Header() {
  return (
    <div>
      <Link href="/">
        <a style={styles.a}>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}
export default Header;

C:\Users\Administrator\Desktop\fusejs\components\hello1.js

export default function Hello1() {
  return <p>Hello World 1 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\fusejs\components\hello2.js

export default function Hello2() {
  return <p>Hello World 2 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\fusejs\components\hello3.js

export default function Hello3() {
  return <p>Hello World 3 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\fusejs\components\hello4.js

export default function Hello4() {
  return <p>Hello World 4 (imported dynamically) </p>
}

C:\Users\Administrator\Desktop\fusejs\components\hello5.js

export default function Hello5() {
  return <p>Hello World 5 (imported dynamically) </p>
}
Previous1. Thực hiện component Header.jsNext3. Sử dụng fuse.js để thực hiện lọc chú ý cách sử dụng Fuse = (await import('fuse.js')).default (ok)

Last updated

Was this helpful?