Question

所以我当前正在尝试为网站中的自定义边栏呈现代码：How to build a custom sidebar in React 。但是我得到了错误：

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：undefined。检查TheSidebar
的渲染方法

我无法理解它有什么问题，但我仍然是React的新手。在节点上运行它。任何帮助表示赞赏。这是代码：

const React = require('react');
const ReactDOM = require('react-dom');
const { IndexLink, Link } = require('react-router');
// import './Sidebar.scss'
const classNames = require('classnames');




class TheSidebar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showMenu: false
        }
        this.toggleMenu = this.toggleMenu.bind(this)
    }
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside.bind(this), true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside.bind(this), true);
    }
    toggleMenu() {
        this.setState({ showMenu: !this.state.showMenu })
    }
    handleClickOutside(event) {
        const domNode = ReactDOM.findDOMNode(this);

        if ((!domNode || !domNode.contains(event.target))) {
            this.setState({
                showMenu: false
            });
        }
    }

    render() {

        const showMenu = this.state.showMenu;
        const sidebarClass = classNames({
            'sidebar': true,
            'sidebar-menu-expanded': showMenu,
            'sidebar-menu-collapsed': !showMenu
        });

        const elementsClass = classNames({
            'expanded-element': true,
            'is-hidden': !showMenu,
        });



    return (
      <nav className={sidebarClass}>
        <img
          className="menuIcon"
          // src={}
          onClick={this.toggleMenu}
        />
        <ul>
          <li>
            <Link className="expandable" to="/setting" title="Setting">
              <img
                src={'https://png.icons8.com/setting/ffffff'}
                alt=""
              />
              <span className={elementsClass}>Setting</span>
            </Link>
          </li>
        </ul>
      </nav>

        );
    }
}


module.exports = TheSidebar;

然后将侧边栏与标题一起注入App文件，然后进行渲染。 app文件和渲染文件如下：

const React = require('react');
const Header = require('./Header.jsx');
const TheSidebar = require('./Sidebar.jsx');

class App extends React.Component {
    render() {
        return(
            <div>
                <head>
                    <title>TESTING</title>
                </head>
                <body>
                    <div>
                        <Header />
                    </div>
                    <div>
                        <TheSidebar />
                    </div>
                </body>
            </div>
        );
    }
}
module.exports = App;

渲染：

app.set('views', path.join(__dirname, "../views"));
app.set('view engine', 'jsx');
app.engine('jsx', createEngine());
app.get("/testing", function(req, res){
    res.render('pages/App.jsx');
});

Answer 1

您没有正确导入IndexLink和Link组件。查看ES6中的命名导入。

你应该像这样导入它们。

import { IndexLink, Link } from 'react-router'

Answer 2

链接和IndexLink作为默认对象导出中的字段导出，因此如果您使用“require”，则首先获取默认导出：

const ReactRouter = require('react-router')

然后选出单个字段：

const IndexLink = ReactRouter.IndexLink
const Link = ReactRouter.Link

编辑：如果你的react-router版本是＆gt; = 4.0，那么其中的索引更长。它在react-router-dom中。并且IndexLink不再可用。你可能应该恢复到3.x来运行这个示例代码

不变违规：反应错误＃130

2 个答案: