Redux + React-Router 不渲染
Redux + React-Router doesn't render
所以我有非常标准的代码,但仍然不起作用。这里有什么问题?
我试过这个解决方案,因为我有同样的错误:,但没有成功。
我在浏览器控制台中的错误仍然是:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我的代码是:
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var createBrowserHistory = require('history/lib/createBrowserHistory');
var createStore = require('redux').createStore;
var Provider = require('react-redux');
var connect = require('react-redux').connect;
var options = 'someTxt';
var reducer = function (state = {}, action) {
console.log('reducer was called with state', state, 'and action', action)
return state;
};
const store = createStore(reducer, options);
function mapStateToProps(state) {
return {options: state.options};
};
var Index = React.createClass({
render: function () {
return (
<div>
{this.props.options}
</div>
);
}
});
connect(mapStateToProps, {
test: () => { type: 'TEST_ACTION' }
})(Index);
ReactDOM.render(
<Provider store={store}>
{() =>
<Router history={createBrowserHistory()}>
<Route path="/" component={Index}/>
</Router>}
</Provider>,
document.getElementById("container")
);
__________UPDATE__________
也请看评论,真的很有用
当您使用带有括号的箭头函数时,它与您的函数 returns 对象不同。大括号表示函数体(因此您必须在其中使用 return 语句)。它应该是这样的:
connect(mapStateToProps, {
test: () => {return { type: 'TEST_ACTION' }}
})(Index);
Provider
是 react-redux
模块的一部分;不是全部。
您需要更改
中的要求语句
var Provider = require('react-redux');
到
var Provider = require('react-redux').Provider;
或使用 ES6 模块语法
import { Provider } from 'react-redux';
所以我有非常标准的代码,但仍然不起作用。这里有什么问题?
我试过这个解决方案,因为我有同样的错误:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我的代码是:
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var createBrowserHistory = require('history/lib/createBrowserHistory');
var createStore = require('redux').createStore;
var Provider = require('react-redux');
var connect = require('react-redux').connect;
var options = 'someTxt';
var reducer = function (state = {}, action) {
console.log('reducer was called with state', state, 'and action', action)
return state;
};
const store = createStore(reducer, options);
function mapStateToProps(state) {
return {options: state.options};
};
var Index = React.createClass({
render: function () {
return (
<div>
{this.props.options}
</div>
);
}
});
connect(mapStateToProps, {
test: () => { type: 'TEST_ACTION' }
})(Index);
ReactDOM.render(
<Provider store={store}>
{() =>
<Router history={createBrowserHistory()}>
<Route path="/" component={Index}/>
</Router>}
</Provider>,
document.getElementById("container")
);
__________UPDATE__________ 也请看评论,真的很有用
当您使用带有括号的箭头函数时,它与您的函数 returns 对象不同。大括号表示函数体(因此您必须在其中使用 return 语句)。它应该是这样的:
connect(mapStateToProps, {
test: () => {return { type: 'TEST_ACTION' }}
})(Index);
Provider
是 react-redux
模块的一部分;不是全部。
您需要更改
中的要求语句var Provider = require('react-redux');
到
var Provider = require('react-redux').Provider;
或使用 ES6 模块语法
import { Provider } from 'react-redux';