SOURCE

// 两个组件 + 示例父组件（可直接使用）
//Search：只负责输入与变化通知（受控输入，不持有数据）。
//List：只负责展示 items，不参与筛选逻辑。
//父组件：持有状态 query 和原始 data，负责筛选与组合。
import React, { useMemo, useState } from "react";

const data = [
  "Human-centric 3D content creation platform",
  "digitalize everyone in the world",
  "human motion capture and animation",
  "photorealistic real-time rendering",
  "fully automatic 3D digitalization technology1",
];

// Search组件：输入筛选关键词
function Search({ value, onChange, placeholder = "搜索关键词..." }) {
  return (
    <input
      type="text"
      value={value}
      placeholder={placeholder}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

// List组件：展示筛选后的数据
function List({ items }) {
  if (!items?.length) {
    return <div>没有匹配的结果</div>;
  }
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

// 父组件：组合Search和List并实现筛选逻辑
export default function SearchListDemo() {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return data;
    return data.filter((item) => item.toLowerCase().includes(q));
  }, [query]);

  return (
    <div>
      <Search value={query} onChange={setQuery} />
      <List items={filtered} />
    </div>
  );
}