0
私はreactとreduxの両方を使用しているところで、次のコードを取得しようとしています。問題はthis.props.comments
が定義されていないことです。何が間違っていますか?react-reduxを使用してプロパティを設定できません
reducer.js:
import React from 'react';
import ReactDOM from 'react-dom';
import CommentBoxContainer from './components/CommentBox';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducer from './reducer'
const store = createStore(reducer);
store.dispatch({
type: 'ADD_COMMENT',
comment:
{id: 3, author: "Me", text: "This is one comment!"}
});
ReactDOM.render(
<Provider store={store}>
<CommentBoxContainer />
</Provider>,
document.getElementById('root')
);
CommentBox.js
import React from 'react';
import { connect } from 'react-redux';
const CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList comments={this.props.comments}/>
<CommentForm />
</div>
);
}
});
function mapStateToProps(state) {
return { comments: state.comments };
}
const CommentBoxContainer = connect(mapStateToProps)(CommentBox);
export default CommentBoxContainer;
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.comments.map(function(comment) {
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
const CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
</div>
);
}
});
const Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});