Question

我正在尝试在React中创建一个词汇表组件，该组件允许我只过滤特定单元学习所需的词汇表术语。我确实有两个不同的数据数组，一个用于术语表，另一个用于单位。这是我的词汇表数据文件：

 {
        id: 1,
      order: 1,
      term: "Mario",
      content: "It's a meeee"
    },
    {
        id: 2,
      order: 2,
      term: "Luigi",
      content: "Okie dokie!"
    },
    {
        id: 3,
      order: 3,
      term: "Peach",
      content: "Thank you, Mario!"
    },
    {
        id: 4,
      order: 4,
      term: "Bowser",
      content: "No one asks for a trap faster than a plumber!"
    },
    {
        id: 5,
      order: 5,
      term: "Ganondorf",
      content: "How dare you attempt to wound the Demon King!"
    }

这是我的单位数据文件：

const units = [
    {
        order: 1,
        glossaryTermsRequired: [1,2,3]
    },
    {
        order: 2,
        glossaryTermsRequired: [4,5]
    }
]

现在这是我的词汇表部分：

const Glossary = ({ glossaryId, glossaryTerm }) => {
    const [isOpen,setIsOpen]=useState(false)
   
    
    
    useEffect(()=>{
        insertGlossaryTerm()
    })
   
  return (
    <>
      <span onClick={()=>setIsOpen(true)} className="glossaryTerm">{glossaryTerm}</span>
      <Sidebar closeSidebar={()=>setIsOpen(false)} isOpen={isOpen}/>
    </>
  );

词汇表组件带有两个道具，即id和术语字符串。我的目的是单击词汇表，并在边栏中显示那些必填的术语，这些术语将在单击时打开。现在，例如，如果单击术语Bowser，如何显示该必需单位的所有术语？（4,5单位2）

谢谢你们

Answer 1

const Glossary = ({ glossaryId, glossaryTerm }) => {
const [isOpen,setIsOpen]=useState(false);
const [sidebarTerms, setSidebarTerms] = useState([]);
   
    
    
useEffect(()=>{
   if (isOpen)
     insertGlossaryTerm()
}, [isOpen])

const insertGlossaryTerm = () => {
  let unit = units.find(u => u.glossaryTermsRequired.indexOf(4)>=0);
  if (unit) {
    let termArray = unit.glossaryTermsRequired.map(id => elements[id].term);
    setSidebarTerms(termArray);
  }
}
   
return (
  <>
    <span onClick={()=>setIsOpen(true)} className="glossaryTerm">{glossaryTerm}</span>
    <Sidebar closeSidebar={()=>setIsOpen(false)} isOpen={isOpen} terms={sidebarTerms}/>
  </>
);

说明：

已创建用于管理相关术语的状态。这是一个字符串列表
单击span时，将打开侧边栏

isOpen

useEffect。搜索相关术语并将其存储在相关状态
状态与侧边栏相连，因此可以通过道具接收相关条款，随时可以显示

要使其正常工作，您需要在我的示例中创建一个名为elements的全局对象，它是一个键值JSON对象，其中键是元素的id，而值是元素本身。

示例：

{
  '1': {
        id: 1,
        order: 1,
        term: "Mario",
        content: "It's a meeee"
     },
  '2': {
        id: 2,
        order: 2,
        term: "Luigi",
        content: "Okie dokie!"
     },
  ...
}

这避免了您的应用程序遍历整个元素列表来查找具有正确ID的元素。

然后，您还需要使units对象可见。

改进：

您可以在insertGlossaryTerm（）之前先于isOpen（）函数触发
如果一项可以包含多个单位，则需要用.filter代替.find函数。

返回包含该特定元素的完整数组

1 个答案: