尝试得到react-router (v4.0.0)和react-hot loader (3.0.0-beta.6)很好地发挥，但在浏览器控制台得到以下错误:
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
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 = () => (
<AppContainer>
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Products} />
<Route path="/basket" component={Basket} />
</Route>
</Router>
</Provider>
</AppContainer>
);
export default routes;
所以我遇到了这个问题，我用一种奇怪的方式解决了它。我想我应该把它扔了，以防其他人遇到它，变得绝望。
我有一个有条件地呈现react元素，它只在对象状态大于零时才会呈现。在呈现函数中-当三元运算符被证明为真时，我收到了这篇文章所涉及的错误。我使用了一个<React。片段>在我的渲染函数-这是我通常分组子的方式，而不是更新的方式与更新的短语法(<>和</>)。
However, when I changed the <React.Fragment> to the short syntax - the react element rendered correctly and the error stopped appearing. I took a look at Facebooks React-Fragment documentation, and I don't see any reason on there to believe there is a dramatic difference between the two that would cause this. Regardless, below are two simplified snippets of code for your review. The first one demonstrates the code that was yielding the error, and the second one demonstrates the code that fixed the issue. At the bottom is the render function of the component itself.
希望有人觉得这有帮助。
代码示例1 -错误
有条件渲染的React元素
renderTimeFields = () => {
return (
<React.Fragment>
<div className="align-left">
<div className="input-row">
<label>Date: </label>
<input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
</div>
</div>
<div className="align-left sendOn-row">
<div className="input-row">
<label>Time: </label>
<input type="time" className="time" name="time" required/>
</div>
</div>
</React.Fragment>
);
}
代码示例2 -无错误
有条件渲染的React元素
renderTimeFields = () => {
return (
<>
<div className="align-left">
<div className="input-row">
<label>Date: </label>
<input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
</div>
</div>
<div className="align-left sendOn-row">
<div className="input-row">
<label>Time: </label>
<input type="time" className="time" name="time" required/>
</div>
</div>
</>
);
}
在组件中呈现函数
render() {
<form>
...
{emailsInActiveScript > 1 ? this.renderTimeFields() : null}
</form>
etc...
}
我所缺少的是我正在使用
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
正确答案应该是:
import { BrowserRouter as Router, Route } from 'react-router-dom';
当然你需要添加npm包react-router-dom:
npm install react-router-dom@next --save
所以我遇到了这个问题，我用一种奇怪的方式解决了它。我想我应该把它扔了，以防其他人遇到它，变得绝望。
我有一个有条件地呈现react元素，它只在对象状态大于零时才会呈现。在呈现函数中-当三元运算符被证明为真时，我收到了这篇文章所涉及的错误。我使用了一个<React。片段>在我的渲染函数-这是我通常分组子的方式，而不是更新的方式与更新的短语法(<>和</>)。
However, when I changed the <React.Fragment> to the short syntax - the react element rendered correctly and the error stopped appearing. I took a look at Facebooks React-Fragment documentation, and I don't see any reason on there to believe there is a dramatic difference between the two that would cause this. Regardless, below are two simplified snippets of code for your review. The first one demonstrates the code that was yielding the error, and the second one demonstrates the code that fixed the issue. At the bottom is the render function of the component itself.
希望有人觉得这有帮助。
代码示例1 -错误
有条件渲染的React元素
renderTimeFields = () => {
return (
<React.Fragment>
<div className="align-left">
<div className="input-row">
<label>Date: </label>
<input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
</div>
</div>
<div className="align-left sendOn-row">
<div className="input-row">
<label>Time: </label>
<input type="time" className="time" name="time" required/>
</div>
</div>
</React.Fragment>
);
}
代码示例2 -无错误
有条件渲染的React元素
renderTimeFields = () => {
return (
<>
<div className="align-left">
<div className="input-row">
<label>Date: </label>
<input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
</div>
</div>
<div className="align-left sendOn-row">
<div className="input-row">
<label>Time: </label>
<input type="time" className="time" name="time" required/>
</div>
</div>
</>
);
}
在组件中呈现函数
render() {
<form>
...
{emailsInActiveScript > 1 ? this.renderTimeFields() : null}
</form>
etc...
}
当我将css文件添加到与组件文件相同的文件夹时，我遇到了这个问题。
我的重要陈述是:
import MyComponent from '../MyComponent'
当只有一个文件MyComponent.jsx时，这很好。(我在一个例子中看到了这种格式，并尝试了一下，然后忘记了我已经做到了)
当我添加MyComponent时。将SCSS导入到同一文件夹，则导入失败。也许JavaScript反而加载了.scss文件，所以没有出现错误。
我的结论是:即使只有一个文件，也要指定文件扩展名，以防稍后添加另一个文件。
