管理 splitterSide 以将其用作可重用组件

Question

大家好，我想创建一个基于 OnsenUI splitterSide demo 的新 SideMenu 组件。我试试这个，但我不知道如何管理我的状态和道具。我是 React.js 的新人。有人可以帮助我改进（解决）这个问题吗？

现在这是我的组件代码：

import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent} from 'react-onsenui';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';

class SideMenu extends Component {
    constructor(props) {
        super(props);

        this.hide = this.hide.bind(this);
        this.show = this.show.bind(this);
        this.page1 = this.page1.bind(this);
        this.page2 = this.page2.bind(this);
    };

    hide() {
        this.props.isOpen = false;
    };

    show() {
        this.props.isOpen = true;
    };

    goto_page1() {
        this.props.navigator.resetPage({
            component: page1,
            key: 'Page1_Index'
        });
    };

    goto_page2() {
        this.props.navigator.resetPage({
            component: page2,
            key: 'Page2_Index'
        });
    };

    render() {
        return (
            <Splitter>
                <SplitterSide
                    style={{
              boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
          }}
                    side='left'
                    width={200}
                    collapse={true}
                    isSwipeable={true}
                    isOpen={this.props.isOpen}
                    onClose={this.hide}
                    onOpen={this.show}
                >
                    <Page>
                        <List
                            dataSource={['page one', 'page two']}
                            renderRow={(title) => {
                            switch(title) {
                                case "page one":
                                    return (
                                        <ListItem key={title} onClick={this.goto_page1} tappable>
                                            <div>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                                case "page two":
                                    return (
                                        <ListItem key={title} onClick={this.goto_page2} tappable>
                                            <div>{title}></div>
                                        </ListItem>
                                        );
                                    break;
                                default:
                                    return (
                                        <ListItem key={title} onClick={this.hide} tappable>
                                            <div>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                            }
                        }}
                        />
                    </Page>
                </SplitterSide>
                <SplitterContent>
                    {this.props.children}
                </SplitterContent>
            </Splitter>

        );
    }
}

SideMenu.propTypes = {
    navigator: PropTypes.object
};

export default SideMenu;

这是第 1 页的代码：

import React, { PropTypes, Component } from 'react';
import { Page, Toolbar, ToolbarButton, Icon} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';


class page1 extends Component {
    constructor(props) {
        super(props);

        this.renderToolbar = this.renderToolbar.bind(this);
        this.hide = this.hide.bind(this);
        this.show = this.show.bind(this);

        this.state = {
            isOpen: false
        };
    };

    renderToolbar() {
        return (
            <Toolbar>
                <div className='left'>
                    <ToolbarButton onClick={this.show}>
                        <Icon icon='ion-navicon, material:md-menu' />
                    </ToolbarButton>
                </div>
                <div className='center'>Page One Title</div>
            </Toolbar>
        );
    };

    hide() {
        this.setState({isOpen: false});
    };

    show() {
        this.setState({isOpen: true});
    };



    render() {
        return (
        <SideMenu navigator={this.props.navigator} isOpen={this.state.isOpen}>
            <Page renderToolbar={this.renderToolbar}>
                Page content here
            </Page>
        </SideMenu>

        );
    }
}

page1.propTypes = {
  navigator: PropTypes.object
};

export default page1;

我的代码风格是否正确？（我的道具是否有效？）

如何防止show和hide函数的两次声明？

新版本：

我根据任何想法或改进更改我的代码？？

import { Meteor } from 'meteor/meteor';
import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui';
import { Random } from 'meteor/random';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';

class SideMenu extends Component {
    constructor(props) {
        super(props);

        this.renderToolbar = this.renderToolbar.bind(this);
        this.hide = this.hide.bind(this);
        this.show = this.show.bind(this);
        this.goto_page1 = this.goto_page1.bind(this);
        this.goto_page2 = this.goto_page2.bind(this);

        this.state = {
            isOpen: false
        };
    };

    renderToolbar() {
        return (
            <Toolbar>
                <div className='left'>
                    <ToolbarButton onClick={this.show}>
                        <Icon icon='ion-navicon, material:md-menu' />
                    </ToolbarButton>
                </div>
                <div className='center'>{this.props.pageTitle}</div>
            </Toolbar>
        );
    };

    hide() {
        this.setState({isOpen: false});
    };

    show() {
        this.setState({isOpen: true});
    };

    goto_page1() {
        this.props.navigator.resetPage({
            component: page1,
            key: 'Page1_Index'
        });
    };

    goto_page2() {
        this.props.navigator.resetPage({
            component: page2,
            key: 'Page2_Index'
        });
    };

    render() {
        return (
            <Splitter>
                <SplitterSide
                    style={{
              boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
          }}
                    side='left'
                    width={200}
                    collapse={true}
                    isSwipeable={true}
                    isOpen={this.state.isOpen}
                    onClose={this.hide}
                    onOpen={this.show}
                >
                    <Page>
                        <List
                            dataSource={[ 'page one', 'page two']}
                            renderRow={(title) => {
                            switch(title) {
                                case "page one":
                                    return (
                                        <ListItem key={title} onClick={this.goto_page1} tappable>
                                            <div className='left'>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                                case "page two":
                                    return (
                                        <ListItem key={title} onClick={this.goto_page2} tappable>
                                            <div className='left'>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                                default:
                                    return (
                                        <ListItem key={title} onClick={this.hide} tappable>
                                            <div className='left'>{title}</div>
                                        </ListItem>
                                        );
                                    break;
                            }
                        }}
                        />
                    </Page>
                </SplitterSide>
                <SplitterContent>
                    <Page renderToolbar={this.renderToolbar} >
                        {this.props.children}
                    </Page>

                </SplitterContent>
            </Splitter>

        );
    }
}

SideMenu.propTypes = {
    navigator: PropTypes.object.isRequired,
    pageTitle: PropTypes.string.isRequired
};

export default SideMenu;

我也将第 1 页更改为：

import React, { PropTypes, Component } from 'react';
import { Icon, List, ListItem, ListHeader} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';


class page1 extends Component {

    render() {
        return (
        <SideMenu navigator={this.props.navigator} pageTitle="page 1 title">
                Page content here
        </SideMenu>

        );
    }
}

page1.propTypes = {
  navigator: PropTypes.object
};

export default page1;

Answer 1

How to prevent two time declaration of show and hide function?

您可以这样使用您的方法：

<YourComponent method={ () => this.hide() }

然后您将不需要 c-tor 中的绑定。

或者使用名为“autobind-decorator”的库并在每个class:

之前添加@autobind

@autobind
class YourComponent extends React.Component {….}

管理 splitterSide 以将其用作可重用组件

manage splitterSide for use it as reusable component

javascript

sidebar

reactjs

onsen-ui

onsen-ui2