更改按钮上的渲染组件单击“反应挂钩”

Question

问题

我正在尝试制作一个仪表板，顶部有3个按钮。当您单击三个按钮之一时，仪表板的内容将被更改，也就是渲染新组件。我有一个按钮组组件和2个其他组件。一个是GenericDashbord，另一个是BasicCountMetrics。我希望按钮组组件中单击的按钮决定在index.js中呈现哪个组件。

源代码

按钮组

import ReactDOM from 'react-dom';

import 'normalize.css/normalize.css'; // Reset browser CSS
import '../../styles/components/styles.scss';
import '../../styles/components/buttonGroup.scss';

// import DataTable from "./components/DataTables/DataTable";

// import DashNav from "./components/menus/DashNav";


import $ from "jquery";
import DashNav from '../menus/DashNav';
import CountMetrics from "../containers/BasicCountMetrics";
import DataTable from "../DataTables/DataTable";
import BasicCountMetrics from '../containers/BasicCountMetrics';

export var DATACHOICE = "BASIC";

const DATA_TYPE_STORAGE = "DATA_TYPE_STORAGE";

const initialState = { dataSet: "BASIC" }
const reducer = (state, newState) => ({
  ...state,
  dataSet: newState.dataSet
})

var init = localStorage.getItem(DATA_TYPE_STORAGE);
var initV = "BASIC";
if(init){
  initV = init;
  DATACHOICE = init;
}

const ButtonGroup = () => {
  const [state, setState] = useReducer(reducer, initialState)

  useEffect(() => {
      // console.log("dataset", dataset);
      $(document).ready(function(){
          $('.ui.button.toggle').state();
          // $('#btnGroup').tab();
          // var s = $('.ui.button.toggle').state();
      })
      // console.log("DATACHOICE", DATACHOICE);
      // storeDataset(DATACHOICE);
      var val = state.dataSet;
      if(val){
        localStorage.setItem('DATA_TYPE_STORAGE', val);
      }
      else{
        localStorage.setItem('DATA_TYPE_STORAGE', initialState);
      }
  }, []);


  const changeData = event => {
    var c = "optionsC"
    // var target = event.target.id
    // var t = target.toString();
    // console.log("t", event.target.value);
    // if(event.target.value == "basic"){
    // console.log("tt", t)
    // }
    // switch(event.target.value) {
    //     case "basic":
    //         c = "BASIC"
    //         // return c = "baseBtn"
    //     case "power":
    //         c = "POWER"
    //         // return c = "powerEnvBtn"
    //     case "metrics":
    //         c = "METRICS"
    //         // return c = "metricBtn"
    //     default:
    //         c = "default Options"
    //         // return c = "default Options"
    // }

    // $("#bodyCont").html(<BasicCountMetrics/>);
    // $('#btnGroup').tab();
    setState({dataSet: event.target.value});
    var vall = toString(event.target.value)
    localStorage.setItem(DATA_TYPE_STORAGE, vall);
    DATACHOICE = event.target.value;
  };

    console.log("dataset", state);
    var d = localStorage.getItem(DATA_TYPE_STORAGE);
    console.log("local", d);

    return (
      <div>
        <div id="btnGroup" class="three ui buttons blue inverted">
            <button id="baseBtn" class="ui button toggle" value="BASIC" onClick={changeData}>Baseline</button>
            <button id="powerEnvBtn" class="ui button toggle" value="POWER" onClick={changeData}>Power & Envrionment</button>
            <button id="metricsBtn" class="ui button toggle" value="METRICS" onClick={changeData}>Metrics</button>
        </div>
        {/* <div className="ui segment">Dataset value is: {state.dataSet}</div> */}
    </div>
    );
};

export default ButtonGroup;

Index.js

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

import 'normalize.css/normalize.css'; // Reset browser CSS
import './styles/components/styles.scss';
import DashNav from "./components/menus/DashNav";
import BasicCountMetrics from './components/containers/BasicCountMetrics';
import ButtonGroup, { DATACHOICE } from "./components/containers/ButtonGroupHooks";

// import $ from "jquery";

// const renderTab = (flag) => {
//     console.log("flag", flag);
//     if(flag=="BASIC"){
//         return <GenericMetrics/>
//     }
//     else if(flag=="POWER"){
//         return <BasicCountMetrics/>
//     }
//     // switch(flag){
//     //     case 'BASIC':
//     //         return <GenericMetrics/>
//     //     case 'POWER':
//     //         return <BasicCountMetrics/>
//     //     case 'METRICS':
//     //         return <div className="ui segment blue">HELLO</div>
//     // }
// }

const Dashboard = () => {
    var loc =  '';//localStorage.getItem('DATA_TYPE_STORAGE')

    useEffect(() => {
        // loc = localStorage.getItem('DATA_TYPE_STORAGE')
        // $(document).ready(function(){
        //     // $('.ui.buttons').on('click', function(){

        //     // });
        // });
        // DATACHOICE = loc;

    },[]);
    // const st = useState(0);
    // console.log("dashoard state", st);
    // console.log("dashoard Choice", DATACHOICE);

    // useEffect(() => {
    //     console.log("useEffectDash");
    //     console.log("das state", st);
    //     console.log("das Choice", DATACHOICE);
    // }, []);
    return (
        <div>
            <DashNav/>
                {/* <FancyNav /> */}
                {/* <MainNav /> */}
                {/* <DropNav /> */}
                {/* <h1>Welcome to the World</h1> */}
                {/* <img src="./images/navair.svg" alt="test" width="200px" height="200px"></img> */}
                {/* <div id="dataTableContainer" className="ui segment green inverted">
                    <TableExample/>
                </div> */}
            <div style={{textAlign: "center"}} className="ui segment mid inverted">
                <h1 class="ui center aligned text white"> Dashbaord</h1>
            </div>
            <ButtonGroup/>
            <div class="ui tab" data-tab="summary">
                <div className="ui segment blue">white</div>
            </div>
            <div class="ui tab" data-tab="edit">
                <div className="ui segment red">red</div>
            </div>
            <div class="ui tab" data-tab="edit">

            </div>

            {/* <div id="bodyCont">
                {renderTab(DATACHOICE)}
            </div> */}
            {/* <GenericMetrics /> */}
        </div>
    );
};


ReactDOM.render(<Dashboard />, document.getElementById('root'));

问题

如何实现此目的，我尝试了useReducer，useState，localStorage，还尝试了简单地创建选项卡，但没有一个起作用。请帮忙，谢谢！

Answer 1

您需要仪表板为您处理状态，然后将其传递给子级。 ButtonGroup调用仪表板接收的道具from matplotlib.dates import DateFormatter ax2.yaxis.set_major_locator(md.HourLocator(interval=1)) ax2.yaxis.set_major_formatter(md.DateFormatter('%H:%M')) 并调用其setState。然后，我们将显示在“仪表板”的返回功能中当前选定的仪表板。

仪表板

onSelectDashboard

ButtonGroup

const [selectedDashboard, setSelectedDashboard] = useState('BASIC')

return (
  <div>
  ...
     <ButtonGroup onSelectDashboard={setSelectedDashboard} />
  ...
    {selectedDashboard === 'BASIC' && <GenericMetrics>}
    {selectedDashboard === 'POWER' && <BasicCountMetrics>}
    {selectedDashboard === 'METRICS' && <div className="ui segment blue">HELLO</div>}
  </div>
)