如何将功能数据发送到 React 中的另一个页面答案

【问题标题】：How to send functional data to another page in React如何将功能数据发送到 React 中的另一个页面
【发布时间】：2022-01-01 12:25:23
【问题描述】：

播放.js 文件

import { useState } from "react";
function Playing(){
  const [sidebar, setSidebar] = useState(false);

  const sidebarFunc = () => {
    sidebar ? setSidebar(false) : setSidebar(false);
  }

  return(
    <i onClick={sidebarFunc}>Click</i>
  );
}

export default Playing;

Sidebar.js 文件

function SideBar() {
  return (
    <div className="">Side Bar</div>
  );
}

export default SideBar;

App.js 文件

import Sidebar from "./Sidebar.js";
import Playing from "./Playing.js";
function App(){
  return(
    <>
      <Sidebar />
      <Playing />
    </>
  );
}

我是新手，所以尽量避免在我身边犯错。在这里，我正在尝试一种在单击 Click 文本后触发 usestate 变量 sidebar 的方法。但是无法导出sidebar 以便得到Sidebar 功能div 作为<div className="sidebar?"Show":"Hide">Side Bar</div> 的结果。

是否有相同或任何其他方式的解决方案。提前谢谢你

【问题讨论】：

标签： reactjs export use-state

【解决方案1】：

你可以在父组件中创建一个状态，然后通过props和回调函数在子组件中使用这个状态

App.js 文件

import Sidebar from "./Sidebar.js";
import Playing from "./Playing.js";
function App(){

 const [sidebar, setSidebar] = useState(false);

  return(
    <>
      <Sidebar sidebar={sidebar}/>
      <Playing  sidebar={sidebar} setSidebar={setSidebar}/>
    </>
  );
}

播放.js

import from "react";
function Playing({sidebar,setSidebar}){


  const sidebarFunc = () => {
    sidebar ? setSidebar(false) : setSidebar(false);
  }

  return(
    <i onClick={sidebarFunc}>Click</i>
  );
}

export default Playing;

SideBar.js

   function SideBar({sidebar}) {
      return (
        <div className=`${sidebar?"Show":"Hide"}`>Side Bar</div>
      );
    }
    
export default SideBar;

【讨论】：

【解决方案2】：

将useState() 声明放在App.js 中。

App.js

function App(){
    const [sidebar, setSidebar] = useState(false);

    return(
        <>
            <Sidebar sidebar={sidebar}/>
            <Playing sidebar={sidebar} setSidebar={(bool) => setSidebar(bool)}/>
        </>
    );
}

SideBar.js

function SideBar(props) {
  return (
    <div className={props.sidebar ? "Show" : "Hide"}>Side Bar</div>
  );
}

export default SideBar;

Playing.js

function Playing(props){
    const sidebarFunc = () => {
        props.sidebar ? props.setSidebar(false) : props.setSidebar(false);
    }

    return(
        <i onClick={sidebarFunc()}>Click</i>
    );
}

export default Playing;

【讨论】：