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

嗨，伙计们，我想根据我的尝试创建一个新的侧菜单组件，但我不知道如何管理我的状态和道具。我是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 { 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;

import React，{PropTypes，Component}来自'React'；
从'react onsenui'导入{Icon，List，ListItem，ListHeader}；
从“../components/SideMenu.jsx”导入侧菜单；
类page1扩展组件{
render（）{
返回(
此处的页面内容
);
}
}
page1.propTypes={
导航器：PropTypes.object
};
导出默认页面1；

如何防止显示和隐藏函数的两次声明

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

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

---

谢谢你的关注。现在我在侧菜单中有一个

hide

，在第1页有一个

hide

。如何防止这种情况发生，并对两者使用一个函数？你的方法有点错误。您需要将hide（）方法从第1页传递到侧菜单：

，然后像这样在侧菜单中使用它：

this.props.hide（）

我不知道为什么，但当我添加

hide

作为属性时，我的浏览器CPU和RAM使用率会增加（直到7G和100%的CPU）。这让我很惊讶。为什么会发生这种情况？你到底是如何添加的？

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;

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

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