React
ユーザーインターフェイスソリューション
サーチ…
前書き
プログラムで使用されている最新のユーザーインターフェイスのアイデアに触発され、Reactコンポーネントに変換されたとしましょう。これが「 ユーザーインターフェイスソリューション 」のトピックです。帰属はappretiatedです。
基本ペイン
import React from 'react';
class Pane extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'section', this.props
);
}
}
パネル
import React from 'react';
class Panel extends React.Component {
constructor(props) {
super(props);
}
render(...elements) {
var props = Object.assign({
className: this.props.active ? 'active' : '',
tabIndex: -1
}, this.props);
var css = this.css();
if (css != '') {
elements.unshift(React.createElement(
'style', null,
css
));
}
return React.createElement(
'div', props,
...elements
);
}
static title() {
return '';
}
static css() {
return '';
}
}
シンプルペインとの主な違いは次のとおりです。
- パネルがスクリプトによって呼び出されたり、マウスでクリックされたときに、パネルにフォーカスがあります。
- パネルが有する
title
コンポーネントごと静的メソッドを、それがオーバーライドを有する他のパネルコンポーネントによって拡張することができるtitle
(ここでその理由は、その機能は、次に局在化のためにレンダリングに再度呼び出すことが可能であるが、この例の範囲内にtitle
意味をなさない) ; -
css
静的メソッドで宣言された個々のスタイルシートを含むことができます(PANEL.css
からファイルの内容をあらかじめロードすることができます)。
タブ
import React from 'react';
class Tab extends React.Component {
constructor(props) {
super(props);
}
render() {
var props = Object.assign({
className: this.props.active ? 'active' : ''
}, this.props);
return React.createElement(
'li', props,
React.createElement(
'span', props,
props.panelClass.title()
)
);
}
}
Tab
インスタンスのpanelClass
プロパティには、説明に使用するパネルのクラスが含まれている必要があります。
PanelGroup
import React from 'react';
import Tab from './Tab.js';
class PanelGroup extends React.Component {
constructor(props) {
super(props);
this.setState({
panels: props.panels
});
}
render() {
this.tabSet = [];
this.panelSet = [];
for (let panelData of this.state.panels) {
var tabIsActive = this.state.activeTab == panelData.name;
this.tabSet.push(React.createElement(
Tab, {
name: panelData.name,
active: tabIsActive,
panelClass: panelData.class,
onMouseDown: () => this.openTab(panelData.name)
}
));
this.panelSet.push(React.createElement(
panelData.class, {
id: panelData.name,
active: tabIsActive,
ref: tabIsActive ? 'activePanel' : null
}
));
}
return React.createElement(
'div', { className: 'PanelGroup' },
React.createElement(
'nav', null,
React.createElement(
'ul', null,
...this.tabSet
)
),
...this.panelSet
);
}
openTab(name) {
this.setState({ activeTab: name });
this.findDOMNode(this.refs.activePanel).focus();
}
}
PanelGroup
インスタンスのpanels
プロパティには、オブジェクトを含む配列が含まれている必要があります。そこにあるすべてのオブジェクトは、パネルに関する重要なデータを宣言します。
-
name
- コントローラスクリプトによって使用されるパネルの識別子。 -
class
パネルのクラス。
プロパティを設定することを忘れないでくださいactiveTab
必要とタブの名前に。
明確化
タブがダウンしているとき、必要なパネルがクラス要素をDOM要素でactive
しています(つまり、表示されることを意味します)。
`PanelGroup`sを使ったビューの例
import React from 'react';
import Pane from './components/Pane.js';
import Panel from './components/Panel.js';
import PanelGroup from './components/PanelGroup.js';
class MainView extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'main', null,
React.createElement(
Pane, { id: 'common' },
React.createElement(
PanelGroup, {
panels: [
{
name: 'console',
panelClass: ConsolePanel
},
{
name: 'figures',
panelClass: FiguresPanel
}
],
activeTab: 'console'
}
)
),
React.createElement(
Pane, { id: 'side' },
React.createElement(
PanelGroup, {
panels: [
{
name: 'properties',
panelClass: PropertiesPanel
}
],
activeTab: 'properties'
}
)
)
);
}
}
class ConsolePanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Console';
}
}
class FiguresPanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Figures';
}
}
class PropertiesPanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Properties';
}
}
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow