显示数组中不同项目的 react.js 按钮

Question

我不知道如何问这个问题，但基本上我只想要显示不同文本的按钮列表。当您单击一个按钮时，它会显示文本。但不是硬编码每个按钮，我希望它是动态的。到目前为止，当我单击任何按钮时，所有内容都会显示而不是单独显示。 （一个按钮应该显示一个定义”我认为这可能是我使用状态的方式。

import React, { useState } from "react";
import terms from "./TermsComponentData.js";
import "./TermsComponent.css";

function TermsComponent() {
  const [showTerm, setShowTerm] = useState(false);
  const buttonList = terms.map((term, index) => (
    <div>
      {showTerm && <h1>{term.definition}</h1>}
      <button
        key={index}
        className="buttons-container-button"
        onClick={() => {
          setShowTerm(!showTerm);
        }}
      >
        {term.name}
      </button>
    </div>
  ));

  return (
    <div className="terms-container">
      <div className="buttons-container">{buttonList}</div>
    </div>
  );
}

我的数据

const terms = [
  {
   
    name: "Term1",
    definition: "This is the definition1",
  },
  {
   
    name: "Term2",
    definition: "This is the definition2",
  },
  {
   
    name: "Term3",
    definition: "This is the definition 3",
  },
  {
   
    name: "Term4",
    definition: "This is the definition 4",
  }
];

export default terms;

Answer 1

目前，您的状态变量showTerm 对所有按钮都是通用的。所以要达到你描述的结果，你需要封装每个按钮的状态。

最简单的方法是创建一个包含showTerm 状态的单独组件，然后根据terms 将这个组件的列表与给定数据映射：

// ? added separate term button with it's own state
function TermButton({ term }) {
  const [showTerm, setShowTerm] = useState(false);

  return (
    <div>
      {showTerm && <h1>{term.definition}</h1>}
      <button
        className="buttons-container-button"
        onClick={() => {
          setShowTerm(!showTerm);
        }}
      >
        {term.name}
      </button>
    </div>
  );
}

function TermsComponent() {
  return (
    <div className="terms-container">
      <div className="buttons-container">
        { // ? for each term, create a TermButton with the given term
          terms.map((term, index) => <TermButton key={index} term={term} />)}
       </div>
    </div>
  );
}