1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- let data = [
- { id: 1, author: "Pete Hunt", text: "This is one comment" },
- { id: 2, author: "Jordan Walke", text: "This is *another* comment" }
- ];
- let Comment = React.createClass({
- rawMarkup: function () {
- let rawMarkup = marked(this.props.children.toString(), { sanitize: true });
- return { __html: rawMarkup };
- },
- render: function () {
- return (
- <div className="comment">
- <h2 className="commentAuthor">
- {this.props.author}
- </h2>
- <span dangerouslySetInnerHTML={this.rawMarkup()} />
- </div>
- );
- }
- });
- let CommentList = React.createClass({
- render: function () {
- return (
- <div className="commentList">
- <Comment author="Pete Hunt">This is one comment</Comment>
- <Comment author="Jordan Walke">This is *another* comment</Comment>
- </div>
- );
- }
- });
- let CommentForm = React.createClass({
- render: function () {
- return (
- <div className="commentForm">
- Hello, world! I am a CommentForm.
- </div>
- );
- }
- });
- let CommentBox = React.createClass({
- render: function () {
- return (
- <div className="commentBox">
- <h1>Comments</h1>
- <CommentList data={this.props.data} />
- <CommentForm />
- </div>
- );
- }
- });
- ReactDOM.render(
- <CommentBox data={data} />,
- document.getElementById("content")
- );
|