React Suite 面板组件

React Suite 是一个高质量、易用的 React 组件库，包含丰富的 UI 组件和工具库，以及文档和示例站点。

React Suite 面板组件可帮助开发者快速创建一个面板，常常用于后台管理系统等场景。

安装

可以通过 npm 安装：

npm install rsuite --save

使用

在组件中引入 Panel 组件：

import { Panel } from 'rsuite';

在自己的组件中使用它，比如在 render 方法中：

render() {
    return (
        <Panel header="Hello World">
            <p>This is a paragraph!</p>
        </Panel>
    );
}

这样就可以创建一个带标题的面板，展示一个段落文本。

API

Props

• header: 面板标题，可以是一个字符串或一个 React 组件。必传。
• footer: 面板底部，可以是一个字符串或一个 React 组件。非必传。
• collapsible: 是否收起。默认为 false。
• defaultExpanded: 默认是否展开。默认为 false。
• expanded: 是否展开，受控属性。
• eventKey: 事件的标识，可以在 onSelect 回调中获取它。同时它也作为嵌套子组件的 activeKey 属性的值。
• onSelect: 选定回调函数。

方法

• collapse(): 收起面板。
• expand(): 展开面板。

示例

import { Panel } from 'rsuite';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {expanded: false};
        this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect(eventKey, event) {
        this.setState({expanded: eventKey === '1'});
    }

    render() {
        const { expanded } = this.state;
        return (
            <Panel header="Hello World"
                collapsible
                expanded={expanded}
                eventKey="1"
                onSelect={this.handleSelect}>
                <p>This is a paragraph!</p>
            </Panel>
        );
    }
}