在从一个子组件到另一个子组件的反应中，每次单击新选项卡时更改按钮

Question

我很难将状态从子组件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，但我无法将此信息用于旅行

感谢您的帮助

Answer 1

让App.js中的handleChange函数用ConceptTabs.js传递的值设置一个状态变量。然后将该状态变量(而非handleChange(传递回Audio.js