相关疑难解决方法(0)

我收到此错误:

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.

这是我的代码:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

我的Home.jsx文件:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" /> …

我试图确定这两个之间是否存在任何重大差异,除了能够通过以下方式导入export default:

import myItem from 'myItem';

使用export const我可以做:

import { myItem } from 'myItem';

我想知道除此之外是否存在任何差异和/或用例.

我遇到了一个使用以下语法导入库的javascript库:

import React, { Component, PropTypes } from 'react';

上述方法与以下方法有什么区别？

import React, Component, PropTypes from 'react';

我已经看到ES6模块的公共出口有以下两种方式:

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };

1. 这两个都有效吗？
2. 如果是这样,为什么它们都存在？
3. 是否有其他有效的模块导出选项使用ES6语法？

我很惊讶我用googlefu找不到答案.我只关心ES6模块,不是 CommonJS,RequireJS,AMD,Node等.

试图让react-router(v4.0.0)和react-hot-loader(3.0.0-beta.6)很好地播放,但是在浏览器控制台中得到以下错误:

警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes …

比如说,我们正在使用React和ES6.我们将React和Component导入为

import React from 'react'
import { Component } from 'react'

为什么语法不同？我们不能按照下面的规定使用吗？

import Component from 'react'

如果是这样,这种声明的语法是什么？

我有一个Vue 2项目,我编写了一个简单的函数来翻译几个月的日期,我想在我的一个组件中导入,但是我收到一个错误:

在'@/utils/date-translation'中找不到导出'default'(导入为'translateDate')

来自src文件夹的相对文件路径是正确的,我正在导出这样的函数:

export function translateDate(date) {
  // my code
}

然后我在组件中导入它,如下所示:

import translateDate from '@/utils/date-translation'

我究竟做错了什么？

我有一个lib用ES6编写的node.js库(用Babel编译),我在其中导出以下子模块:

"use strict";

import * as _config from './config';
import * as _db from './db';
import * as _storage from './storage';

export var config = _config;
export var db = _db;
export var storage = _storage;

如果从我的主项目中我包含这样的库

import * as lib from 'lib';
console.log(lib);

我可以看到正确的输出,它按预期工作{ config: ... }.但是,如果我尝试像这样包含库:

import lib from 'lib';
console.log(lib);

它会undefined.

有人能解释一下这里发生了什么吗？这两种导入方法不应该是等价的吗？如果没有,我错过了什么区别？

我可以看到有两种不同的导入方式

import React from 'react'
import { render } from 'react-dom'

第二个有括号.那两者有什么区别？什么时候应该添加括号？谢谢