Reactjs 一次只打开一个部分的逻辑

我正在努力想出实施方案

它就像一个可折叠的。我有一个具有本地useState的卡组件。只有一个单选按钮应该处于活动状态，但现在所有单选按钮都可以处于活动状态

我知道使用一个本地状态，每张卡都有自己的状态，所以它们可以同时处于活动状态

在这种情况下，我需要某种统一状态或类似的东西来处理选择。但是我怎么能做到呢

这是我的卡片组件：

import * as S from './styled'
import Radio from '@material-ui/core/Radio'

export default function PackageCard({ packageInformations }) {
  const [selectedValue, setSelectedValue] = React.useState(false)

  const handleChange = () => {
    setSelectedValue(!selectedValue)
  }

  return (
    <>
      <S.FormSectionContainer>
        <S.PackageContainer>
          <S.PackageSelectionContainer>
            <S.PackageNameAndPrice>
              <S.PackageName>{packageInformations.packageName}</S.PackageName>
              <S.PackagePrice>{packageInformations.packagePrice}</S.PackagePrice>
            </S.PackageNameAndPrice>
            <Radio checked={selectedValue} onChange={handleChange} value={selectedValue} name="package" />
          </S.PackageSelectionContainer>

          {selectedValue && (
            <S.PackageInformationContainer>
              <S.PackageDescription>{packageInformations.description}</S.PackageDescription>
            </S.PackageInformationContainer>
          )}
        </S.PackageContainer>
      </S.FormSectionContainer>
    </>
  )
}

 {packages.map(packageInfo => (
   <PackageCard packageInformations={packageInfo}/>
 ))}

import*as from./styled'
从“@material ui/core/Radio”导入无线电
导出默认函数PackageCard（{PackageInformation}）{
常量[selectedValue，setSelectedValue]=React.useState（false）
常量handleChange=（）=>{
setSelectedValue（！selectedValue）
}
返回(
{packageInformations.packageName}
{PackageInformation.packagePrice}
{selectedValue&&(
{packageInformations.description}
)}
)
}

在我的页面中，我只是：

import * as S from './styled'
import Radio from '@material-ui/core/Radio'

export default function PackageCard({ packageInformations }) {
  const [selectedValue, setSelectedValue] = React.useState(false)

  const handleChange = () => {
    setSelectedValue(!selectedValue)
  }

  return (
    <>
      <S.FormSectionContainer>
        <S.PackageContainer>
          <S.PackageSelectionContainer>
            <S.PackageNameAndPrice>
              <S.PackageName>{packageInformations.packageName}</S.PackageName>
              <S.PackagePrice>{packageInformations.packagePrice}</S.PackagePrice>
            </S.PackageNameAndPrice>
            <Radio checked={selectedValue} onChange={handleChange} value={selectedValue} name="package" />
          </S.PackageSelectionContainer>

          {selectedValue && (
            <S.PackageInformationContainer>
              <S.PackageDescription>{packageInformations.description}</S.PackageDescription>
            </S.PackageInformationContainer>
          )}
        </S.PackageContainer>
      </S.FormSectionContainer>
    </>
  )
}

 {packages.map(packageInfo => (
   <PackageCard packageInformations={packageInfo}/>
 ))}

{packages.map（packageInfo=>(
))}

这就是我所拥有的：

---

把状态放在上面怎么样

const PackageCardsList = () => {
  const [checkedIndex, setCheckedIndex] = useState();

  return (
    <>
      {packages.map((packageInfo, index) => (
        <PackageCard
          checked={checkedIndex === index}
          packageInformations={packageInfo}
          onCheck={() => setCheckedIndex(index)}
        />
      ))}
    <>
  );
};

const PackageCardsList=（）=>{
常量[checkedIndex，setCheckedIndex]=useState（）；
返回(
{packages.map（（packageInfo，index）=>(
setCheckedIndex（索引）}
/>
))}
);
};

然后在组件

PackageCard

中处理这两个新道具

如果你的卡片有一个ID，那就更好了，这样你就可以存储那些卡片而不是索引。不要忘记渲染阵列组件的关键道具