Question

我对ReactJS相当新，所以我还在学习绳索，但是在尝试将react-router合并到我的应用程序中时出现错误。我得到的可爱错误是：

未捕获的不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。检查private void TxtName_Tapped(object sender, TappedRoutedEventArgs e) { int tag = ((TextBlock)sender).Tag; //do something }的呈现方法。

我一直在寻找这个错误，看到了一些我不相信适用于我的情况的修复。最常见的错误是缺少“退货”。方法，但我很确定我不会错过一个。

这是我的index.js中的代码：

App

我的App.jsx看起来像：

import './styles/main.css'

import Contact from './components/Contact.jsx';
import App from './components/App.jsx';

import React from 'react';
import ReactDOM from 'react-dom';


import { Router, Route, hashHistory } from 'react-router'

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
), document.getElementById('app'))

对此错误的帮助将非常感激。几天来，我一直在摸不着头脑。

谢谢！

Answer 1

在Link中，您并未正确解构导入import { Link } from 'react-router';。它应该是

Link

这会导致使用var Link = require('react-router').Link作为组件（在您的App的渲染方法中）未定义。

Destructuring Assignment语法可以从对象中提取数据并同时保存它们。 ES6引入了这种简易易用性。在ES5中，这看起来像：

Component

但请记住，这仅适用于您访问某个对象的子级（在您正在使用的导入模块的情况下的子模块）。这就是为什么在导入React或ReactDOM时不需要它;你导入了整个东西。但这并不代表那些其他图书馆也无法做到。对于React，您可以直接导入import React, { Component } from 'react';，并按名称

引用它

export default class App extends Component { ... }
                                 ^

然后你就像使用它一样：

React.Component

请注意，您未使用Link？这是因为我们已经使用与来自react-router的{{1}}相同的解构语法导入了它。

反应JS不变违规

1 个答案: