javascript - 使用按钮映射时如何通过子组件中的按钮显示/隐藏父组件中的组件？

Question

有点啰嗦的问题...
我查看了十多个类似的问题，但它们要么与同一文件中的组件有关，要么与单个按钮有关。
预期效果:
一旦用户单击特定存储库的卡片，我就会尝试显示存储库提交。提交是隐藏的，直到他们按下按钮。如果用户在显示提交时单击按钮，则应隐藏提交。连续点击 repo 卡应该显示/隐藏/显示/隐藏/等。适当的提交卡。

function Home() {
    const title = "Projects"
    const message = "Projects fetched from Github using their GQL API."
    const [clicked, setClicked] = useState(false)
    const [repoInfo, setRepoInfo] = useState({ name: "Website", owner: "FernandoH-G" })

    return (
        <Container>
            <Jumbo title={title} message={message} />
            <CardDeck>
                <RepoCards clicked={clicked} setClicked={setClicked} setRepoInfo={setRepoInfo} />
            </CardDeck>
            <br/>
            <CardDeck>
                {clicked && <CommitCards repoInfo={repoInfo} />}
            </CardDeck>
        </Container>
    );
}

function RepoCards(props) {
    const { loading, error, data } = useQuery(GET_PINNED_REPOS);
    const [radioValue, setRadioValue] = useState("");

    if (loading) return (
        <Loading
            message="Fetching pinned repositories..."
            color="secondary" />
    )
    if (error) return (
        <Loading
            message="Error fetching pinned repositories."
            color="danger" />
    )
    const pinEdges = data.user.pinnedItems.edges

    return (
        pinEdges.map((pin, idx) => (
            <Card
                key={pin.node.name}
                className="text-center"
                border="light">
                <Card.Body>
                    <Card.Header as="h5"> {pin.node.name}</Card.Header>
                    <Card.Link href={pin.node.url}>
                        <Card.Img variant="top" src={chooseIMG(pin.node.name)} />
                    </Card.Link>
                    <Card.Text> {pin.node.description}</Card.Text>
                </Card.Body>
                <ButtonGroup toggle>
                    <ToggleButton
                        key={pin.node.name}
                        type="radio"
                        variant="outline-secondary"
                        name="Button Radio"
                        value={pin.node.name}
                        checked={radioValue === pin.node.name}
                        onChange={(e) => setRadioValue(e.currentTarget.value)}
                        onClick={() => {
                            console.log(`${idx} card clicked. click value: ${props.clicked}`)
                            props.setRepoInfo(
                                {
                                    name: pin.node.name,
                                    owner: pin.node.owner.login
                                })
                            props.setClicked(!clicked) // This should work,right?

                            // if (radioValue === pin.node.name) {
                            //  // props.setClicked(prevVal => !prevVal)
                            //  props.setClicked(false)
                            // } else {props.setClicked(true)}
                        }}>
                        Last Update:{' '}
                        {parseDate(pin.node.pushedAt)}
                    </ToggleButton>
                </ButtonGroup>
            </Card>
        ))
    )
}

我包括 CommitCards 组件代码，即使我认为没有必要。

const CommitCards = (props) => {
    const name = props.repoInfo.name
    const owner = props.repoInfo.owner
    const { loading, error, data } = useQuery(GET_REPO_COMMITS, {
        variables: { name, owner },
    });
    if (loading) return (
        <Loading message={`Fetching ${name} commits...`} color="secondary" />
    );
    if (error) return (
        <Loading message={`Error fetching ${name} commits.`} color="danger" />
    );

    const commits = data.repository.defaultBranchRef.target.history.edges
    return commits.map(com => (
        <Card
            key={com.node.url}
            bg={"dark"}
            style={{ color: "white" }}
            border="info">
            <Card.Body>
                <Card.Link href={com.node.url}>
                    Commit Date:{'\n'}
                    {parseDate(com.node.committedDate)}
                </Card.Link>
                <Card.Text>
                    {parseText(com.node.message)}
                </Card.Text>
            </Card.Body>
        </Card>
    ))
}

查看控制台并记录点击状态后，可能是渲染问题。我这样说是因为它似乎将所有内容渲染了两次，从而弄乱了 clicked 的值。
我不知道。我已经在这几天了。下面是我单击每个按钮后控制台输出的屏幕截图。提交甚至没有显示；没有接近达到我想要的效果。

巨大的发展
按照@deckele 的建议，我正在研究 code sandbox当我注意到我的初始代码发布时......实际上有效，有点。我绝对可以优化发布的代码。我无法让 react-bootstrap 在代码沙箱中工作，但结果是更好。
原来是 <ToggleButton>读取单击标签，文本部分，作为在控制台上的单击，两次。但是，您必须点击非常小的实际输入区域。您可以在代码沙箱中查看注册为单击的标签。

不幸的是，输入区域被标签覆盖，它本质上是整个按钮。
由于这个问题发生了变化，我将关闭这个问题，并且可能会打开一个新的 react-bootstrap 问题。

Answer 1

可能有更多方法可以使此工作正常进行。
我认为你可以不使用 clicked 离开状态在 Home - 如果我没有遗漏一些东西，我不确定你为什么需要它
你可以:
1.在Home

仅保留 repoInfo并摆脱 clicked

发起 repoInfo与 null或者你想加载到 mount

上的值

通repoInfo和 setRepoInfo下至 RepoCards

更改 clicked查看 reportInfo

function Home() {
  const title = 'Projects';
  const message = 'Projects fetched from Github using their GQL API.';
  const [repoInfo, setRepoInfo] = useState({
    name: 'Website',
    owner: 'FernandoH-G',
  }); // if you initiate repoInfo with `null` you won't have a repo selected in mount

  return (
    <Container>
      <Jumbo title={title} message={message} />
      <CardDeck>
        <RepoCards
          setRepoInfo={setRepoInfo}
          reportInfo={repoInfo}
        />
      </CardDeck>
      <br />
      <CardDeck>{repoInfo && <CommitCards repoInfo={repoInfo} />}</CardDeck>
    </Container>
  );
}

2.在 RepoCards

摆脱radioValue - 你不会使用它；您可以确定checked值使用 repoInfo

删除 onClick来自 ToggleButton并仅使用 onChange更改为类似

<ToggleButton
  key={pin.node.name}
  type="radio"
  variant="outline-secondary"
  name="Button Radio"
  value={pin.node.name}
  checked={props.reportInfo && props.reportInfo.name === pin.node.name}
  onChange={() => {
    const newReportInfo =
      props.reportInfo && props.reportInfo.name === pin.node.name
        ? null
        : {
            name: pin.node.name,
            owner: pin.node.owner.login,
          };
    props.setRepoInfo(newReportInfo);
  }}
>
  Last Update: {parseDate(pin.node.pushedAt)}
</ToggleButton>;