每次单击新选项卡时更改按钮以从一个子组件响应另一个子组件答案

【问题标题】：change the button each time a new tab is clicked in react from one child component to another child component每次单击新选项卡时更改按钮以从一个子组件响应另一个子组件
【发布时间】：2022-01-03 22:05:34
【问题描述】：

我很难将状态从子组件 ConceptTabs.js 向上传递到父组件 App.js，然后再向下传递到另一个子组件 Audio.js

我有一个结构如下的 react 应用：

src/
  App.js
  components/
     header.js
     Audio2.js
     ConceptTabs.js

App.js

import React from "react";
import Header from "./components/header";
import ConceptTabs from "./components/ConceptTabs";

function App() {

  let handleChange = (id) => {
    console.log("clicked", id);
    return id
  };

  return (
    <>
      <Header currPage={handleChange} />
      <br />
        <ConceptTabs handleChangeProps={handleChange} />
        </>
  );
}

export default App;

ConceptTabs.js

import React from "react";

function Tabs (props) {

  return (
    <>
     <button onClick={props.handleChangeProps(1)} > 
     ONE
    </button> 
    <br />
    <button onClick={props.handleChangeProps(1)} > 
     TWO
    </button> 
    <br />
    <button onClick={props.handleChangeProps(1)} > 
     THRE
    </button> 

    </>
  );
}

export default Tabs;

Header.js

import React from "react";
import Audio from "./Audio2"

function Header (props) {

  return (
     < Audio />
  );
}

export default Header;

和Audio2.js

import React, { useState, useEffect } from "react";
import { Pause, Play } from "react-feather";
import { Button } from "@chakra-ui/react";

function AudioPlayer(props) {

  // variable to play audio in loop
  const [isPlay, isPlaying] = useState(0);


  const [currPage, updatePageAudio] = useState({
    currPage: props.currPage,
  });

  const handlePlaying = () => {
    if (isPlay) {
      isPlaying(0);
    } else {
      isPlaying(1);
    }
  };

  console.log("Audio", currPage);

  return (
        <button
          onClick={handlePlaying}
        >
          <>{isPlay ? "Pause" : "Listen to this page"}</>
        </button>
  );
}

export default AudioPlayer;

App.js 渲染 header.js 和 Concept.js 当用户单击Concept.js 上的按钮时那应该可以到达App.js 然后进入header.js，然后进入Audio2.js，它将Audio2.js内部的按钮重置为其原始状态。

我不确定如何做到这一点，我不仅将状态向上传递，而且将其从另一个分支传回给子级。

这是我的沙盒链接：https://codesandbox.io/s/passing-states-ep03t?file=/src/components/Audio2.js:0-672

目前，我尝试添加一个从App.js 向下传递到ConceptTabs.js 的函数，以获取有关推送的号码的信息，然后我尝试将此信息发送回Audio2.js 但是我无法获取此信息以进行旅行

感谢您的帮助

【问题讨论】：

标签： javascript reactjs state

【解决方案1】：

让App.js 中的handleChange 函数使用从ConceptTabs.js 向上传递的值设置状态变量。然后将该状态变量（不是handleChange）传递回Audio.js

【讨论】：