Ich habe Probleme, meinen Kopf um diese zu wickeln. Ich schreibe eine Dashboard-App, um mit Reagieren zu experimentieren. Ich versuche, die Dinge schön und modular zu halten. Ich habe zwei Layout-Klassen „row.js“ & „col.js“ Sie wesentlichen Bootstrap reaktionsGitterElement zurückkehren, „col-SM-3“ usw.Reagieren Lifting Sate durch Komponenten
Ich habe eine Widget-Klasse geschaffen und ein Widget-expandierbaren Klasse. Die Widget-Klasse gibt ein Div mit einigen Stilen zurück und die Widget-erweiterbare Klasse erweitert die Widget-Klasse und fügt einen Klick-Handler hinzu, um auf die volle Browser-Breite zu expandieren. Dann erstelle ich benutzerdefinierte Widget-Klassen, die diese Widget-Klassen erweitern. Diese benutzerdefinierten Klassen fügen Diagramme oder Tabellen usw. zur tatsächlichen Komponente hinzu. Das Problem im beheben versucht, ist:
In meinem dashboard.jsx ich habe:
<Row>
<Col size="sm" num="3">
<SpeakerFees expanded={false}/>
</Col>
<Col size="sm" num="9">
<ProgramStatusByZoneOverview />
</Col>
</Row>
ich auf der Widget-Komponente klicken mag, übergeben Sie sie zum nächsten Vorfahren „“ und alarmierte die anderen Widget (s) in derselben Reihe. Laut den reaktiven Hebezustandsdokumenten sollen wir zum nächsten Vorfahren aufsteigen. In diesem Fall zwei Elemente nach oben. Das ist nervig lol
Da das Layout des Dashboards nur etwa 10 Widgets enthält, dachte ich mir, es wäre das Beste, wenn ich diese in Dashboard.jsx fest codiere, anstatt irgendeine Art von Schleife zu haben. Unten sind die restlichen meiner Klassen.
dashboard.jsx
var React = require('react');
var ReactDOM = require('react-dom');
import { Row } from './layout/row.jsx';
import { Col } from './layout/col.jsx';
import { TotalWidget } from './widgets/total-widget.jsx';
import { ProgramsPlannedBySeries } from './widgets/programs-planned-by-series.jsx';
import { SpeakerFees } from './widgets/speaker-fees.jsx';
import { ProgramStatusByZoneOverview } from './widgets/program-status-by-zone-overview.jsx';
import 'bootstrap/dist/css/bootstrap.css';
import '../styles/app.scss';
class Dashboard extends React.Component {
render() {
var list = [
{
"size": "sm",
"num": "3"
},{
"size": "sm",
"num": "3"
},{
"size": "sm",
"num": "3"
},{
"size": "sm",
"num": "3"
}
]
return (
<div className="container">
<Row>
{list.map(function(object, i){
return (
<Col key={i.toString()} size={object.size} num={object.num}><TotalWidget key={i.toString()} /></Col>
);
})}
</Row>
<Row>
<Col size="sm" num="12">
<ProgramsPlannedBySeries />
</Col>
</Row>
<Row>
<Col size="sm" num="3">
<SpeakerFees expanded={false}/>
</Col>
<Col size="sm" num="9">
<ProgramStatusByZoneOverview />
</Col>
</Row>
<Row>
<Col size="sm" num="3">
<SpeakerFees expanded={false}/>
</Col>
<Col size="sm" num="9">
<ProgramStatusByZoneOverview />
</Col>
</Row>
<Row>
<Col size="sm" num="3">
<SpeakerFees expanded={false}/>
</Col>
<Col size="sm" num="9">
<ProgramStatusByZoneOverview />
</Col>
</Row>
</div>
);
}
}
ReactDOM.render(<Dashboard />, document.getElementById('widgets-wrapper'));
und mein Widget-Klassen:
widget.jsx
var React = require('react');
import {TweenMax, Power2, TimelineLite} from "gsap";
export class WidgetMenu extends React.Component {
constructor() {
super();
this.click = this.click.bind(this);
}
click() {
alert()
}
render() {
return (
<span onClick={this.click} className={"glyphicon glyphicon-option-horizontal elipsis " + this.props.state} ></span>
);
}
}
export class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {'scale': false, 'class': ''};
this.hover = this.hover.bind(this);
}
hover() {
if(!this.state.scale){
this.setState({'scale': true, 'class': 'scaleUp'})
}else{
this.setState({'scale': false, 'class': ''})
}
}
click() {
// alsert('widget')
}
render() {
return (
<div onClick={this.click} onMouseEnter={this.hover} onMouseLeave={this.hover} className="widget"><WidgetMenu state={this.state.class} />{ this.props.children }</div>
)
}
}
und Widget-expandable.jsx
widget-expandable.jsx
import { Widget, WidgetMenu } from './widget.jsx';
var React = require('react');
export class WidgetExpandable extends Widget {
constructor(props) {
super(props);
}
render() {
return (
<div onMouseEnter={this.hover} onMouseLeave={this.hover} className="widget"><WidgetMenu state={this.state.class} />{ this.props.children }</div>
)
}
}
und hier sind die zwei benutzerdefinierte Widgets, die nebeneinander sein würde, ist cols/Reihen in der armaturenbrett.jsx:
speaker-fee.jsx
"use strict";
var React = require('react');
var Highcharts = require('highcharts');
import { WidgetExpandable } from './widget-expandable.jsx';
export class SpeakerFees extends React.Component {
render() {
return (
<WidgetExpandable handleClick={this.props.handleClick}>
<div id="speaker-fees-chart"></div>
</WidgetExpandable>
);
}
}
und
program-status.jsx
"use strict";
var React = require('react');
import { Widget } from './widget.jsx';
export class ProgramStatusByZoneOverview extends React.Component {
render() {
return (
<Widget keyId={1}>
<table className="table" id="speaker-fees-table">
<thead>
<tr>
<th>Speaker Fees, Travel...</th>
<th>Budgeted Spend</th>
<th>Actual Spend</th>
<th>Variance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fee For Service</td>
<td>250,000</td>
<td>150,000</td>
<td>-1.5%</td>
</tr>
<tr>
<td>Fee For Service</td>
<td>250,000</td>
<td>150,000</td>
<td>-1.5%</td>
</tr>
<tr>
<td>Fee For Service</td>
<td>250,000</td>
<td>150,000</td>
<td>-1.5%</td>
</tr>
<tr>
<td>Fee For Service</td>
<td>250,000</td>
<td>150,000</td>
<td>-1.5%</td>
</tr>
<tr>
<td>Fee For Service</td>
<td>250,000</td>
<td>150,000</td>
<td>-1.5%</td>
</tr>
</tbody>
</table>
</Widget>
);
}
}