在按钮上更改渲染组件，单击反应钩子

Question

问题

我正在尝试制作一个仪表板，其中顶部有 3 个按钮。当您单击三个按钮之一时，仪表板的内容应该会更改，即呈现新组件。我有一个按钮组组件和其他 2 个组件。一个是GenericDashbord，另一个是BasicCountMetrics。我希望在按钮组组件中单击的任何按钮都会决定在我的索引中呈现哪个组件.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;

索引.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

您需要仪表板为您处理状态，然后将其传递给子级。 按钮组调用仪表板接收的道具onSelectDashboard并调用其 setState。 然后，我们显示当前在仪表板的返回函数中选择的仪表板。

挡泥板

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>
)

按钮组

const ButtonGroup = ({onSelectDashboard}) => {
...
const changeData = event => {
onSelectDashboard(event.target.value)
};
...
}