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
에서 파일 내용을 미리로드 할 수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