React JS不變違規

我對ReactJS相當陌生，所以我仍然在學習繩索，但在嘗試將react-router整合到我的應用程序中時出現錯誤。那我得到可愛的錯誤是：React JS不變違規

未捕獲不變違規：元素類型無效：預期字符串（內置組件）或類/功能（複合組件），但得到：不確定。檢查App的渲染方法。

我搜索了這個錯誤，並且看到了一些我不相信適用於我的情況的修復。最常見的錯誤是缺少'return'方法，但我確信我不會錯過一個。

這裏是我的index.js代碼：

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

而且我App.jsx樣子：

import React from 'react'; 

import Link from 'react-router' 

export default class App extends React.Component { 
    render() { 
     return(
      <div className="wrapper"> 
      <header> 
       <h1>Rest Test Contact List</h1> 
       <nav> 
       <ul className="navigation"> 
        <li><Link to="/contact">Contact</Link></li> 
        <li><Link to="/about">About</Link></li> 
       </ul> 
       </nav> 
      </header> 
      {this.props.children} 
      </div> 
    ) 
    } 
}

並幫助這個錯誤，將不勝感激。這幾天我一直在撓頭。

謝謝！

來源

2016-03-15 ZeroHour

我注意到的一件事是在App.jsx中，你沒有正確解構你的'Link'導入。它應該是來自'react-router''的import {Link}。這可能是導致爲什麼使用'Link'作爲組件（在你的App的渲染方法中）未定義的原因。我說'可能'，因爲我無法通過所有設置來測試它。 – filoxo

你太棒了！那確實解決了它。你能向我解釋爲什麼我需要使用大括號來從react-router中導入一件事，而你不需要爲React或ReactDOM等其他人做這件事嗎？ – ZeroHour

當然！我會用更詳盡的解釋來寫一個答案 – filoxo

在App.jsx中，您沒有正確解構導入Link。它應該是

import { Link } from 'react-router';

，將導致使用Link作爲成分（在你的應用程序的渲染方法）是不確定的。

Destructuring Assignment語法可以從對象中提取數據並同時保存它們。 ES6引入了簡便易用的簡寫。在ES5這看起來像：

var Link = require('react-router').Link

但是請記住，當你訪問一個對象的子女（子模塊中，你正在使用的進口模塊的情況下），這僅適用。這就是爲什麼你在導入React或ReactDOM時不需要它;你正在導入整個事情。但這並不意味着對於其他圖書館也無法做到這一點。對於反應，你可以直接導入Component，並通過名稱

import React, { Component } from 'react';

引用它，然後你會使用它像：那你不使用React.Component

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

通知？因爲我們已經使用與react-router的Link相同的解構語法導入它。

來源

2016-03-15 16:44:53 filoxo

您可以使用ReactDOM中的'render'做同樣的事情，因爲它是ReactDOM最常用的用法。只需從'react-dom'中輸入{render};（在渲染中介紹小寫的* r *），然後只渲染（，document.getElementById（'app'））;'。保存你自己的幾個字節。 – filoxo

React JS不變違規

回答

相關問題