不变违规：反应错误 #130答案

【问题标题】：Invariant Violation: React error #130不变违规：反应错误 #130
【发布时间】：2017-09-14 13:04:59
【问题描述】：

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

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。查看TheSidebar的render方法

我无法理解它有什么问题，但我仍然是 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文件和render文件如下：

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');
});

【问题讨论】：

确保来自 react-router 的 Link 组件被正确导入。
@Sulthan 如何确保正确导入？
@Sulthan，从 console.log 看来，链接没有正确导入，我不知道为什么

标签： node.js reactjs

【解决方案1】：

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

const ReactRouter = require('react-router')

然后挑选出各个字段：

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

编辑：如果您的 react-router 版本 >= 4.0，则索引在其中更长。它在 react-router-dom 中。并且 IndexLink 不再可用。您可能应该恢复到 3.x 来运行此示例代码

【讨论】：

你的观点很好。但是我刚刚试了一下，错误依旧存在。
拥有 4.2 版，所以我想我需要一直还原它，因为我投入了这个：/ 但我很困惑如何还原？
我的意思是，我知道我可以安装早期版本，但是 require() 方法会使用旧版本，所以应用程序可以工作吗？
只需从您的 package.json 中删除 4.x 版本，即在您的 package.json 中将 react-router 更改为某个 3.x 版本，例如 3.0.5 并运行“npm install”再次，您的要求声明将接受它。
我根本不需要卸载 4.x，因为在我安装 3.x.x 版本的那一刻，它就渲染了。非常感谢道格，这对我帮助很大。现在对我来说是样式表地狱：-P

【解决方案2】：

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

你应该像这样导入它们。

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

【讨论】：

我不能这样做，因为我在 node.js 上运行它。我实际上应该将其添加到我的帖子中，我的错。
你能展示你是如何在你的应用程序中使用这个组件的吗？因为我刚刚在我的应用程序中复制了相同的代码，它似乎工作正常。