3. Sử dụng fuse.js để thực hiện lọc chú ý cách sử dụng Fuse = (await import('fuse.js')).default (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>
	<h2>Bước 3: Sử dụng fuse.js lọc mảng</h2>
	const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee'];
	<input type="text" placeholder="Search" onChange={async (e) => { const { value } = e.currentTarget; const Fuse = (await import('fuse.js')).default; const fuse = new Fuse(names); setResults(fuse.search(value));}}
        />
</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 names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee'];
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);
  const [results, setResults] = useState('');
  return (
    <div>
      <Header />
      <DynamicComponent1 />
      <DynamicComponent2 />
      <DynamicComponent3 />
      {falsyField && <DynamicComponent4 />}
      <button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
      {showMore && <DynamicComponent5 />}
      <div style={{ marginTop: '1rem' }}>
        <input 
          type="text" 
          placeholder="Search" 
          onChange={async (e) => {
            const { value } = e.currentTarget;
            const Fuse = (await import('fuse.js')).default;
            const fuse = new Fuse(names);
            setResults(fuse.search(value));
          }}
        />
        <pre>Results: {JSON.stringify(results, null, 2)}</pre>
      </div>
    </div>
  )
}

export default IndexPage;
Previous2. Thực hiện Dynamic import (ok)NextCách sử dụng fuse.js có await và k hông có await (ok)

Last updated

Was this helpful?