36:16警告onSetOpen属性键的处理程序函数必须以'handle'react / jsx-handler-names开头

Question

我正在尝试使用此处的组件示例来设置react-sidebar ，并且在编译时遇到以下错误消息：

36:16  warning  Handler function for onSetOpen prop key must begin with 'handle'  react/jsx-handler-names

这是我的Leftbar.js文件：

import React from 'react';
import { Sidebar } from 'react-sidebar';
import './Leftbar.css';


var Leftbar = React.createClass({
  getInitialState() {
    return {sidebarOpen: false, sidebarDocked: false};
  },

  onSetSidebarOpen: function(open) {
    this.setState({sidebarOpen: open});
  },

  componentWillMount: function() {
    var mql = window.matchMedia(`(min-width: 800px)`);
    mql.addListener(this.mediaQueryChanged);
    this.setState({mql: mql, sidebarDocked: mql.matches});
  },

  componentWillUnmount: function() {
    this.state.mql.removeListener(this.mediaQueryChanged);
  },

  mediaQueryChanged: function() {
    this.setState({sidebarDocked: this.state.mql.matches});
  },

  render: function() {
    var sidebarContent = <b>Sidebar content</b>;

    return (
      <Sidebar sidebar={sidebarContent}
               open={this.state.sidebarOpen}
               docked={this.state.sidebarDocked}
               onSetOpen={this.onSetSidebarOpen}>
        <b>Main content</b>
      </Sidebar>
    );
  }
});

export default Leftbar;

这被传递到我的Home.js中：

import React from 'react';
import { Row } from 'react-bootstrap';
import Leftbar from './components/Leftbar/Leftbar';
import Widgets from './components/Widgets/Widgets'
import './Home.css'


var Home = React.createClass({
    render: function() {
        return (
            <div className="container">
                <Row>
                    <Leftbar/>
                    <Widgets/>
                </Row>
            </div>
        );
    }
});

export default Home;

Answer 1

尝试从'react-sidebar'使用默认导入：

import Sidebar from 'react-sidebar';