typescript编写react组件 —— 留言、评论组件

前言

以前有在笔记中提过typescript编写react的环境如何配置，当时那只是练习时能够使用时的方法，若是在实际项目，会用到react-router、redux、webpack、less等，因此环境又须要另外的配置，这里只是针对初学者使用typescript+react练习代码的代码片断，可供参考：

组件结构

/*  
 * CommentBox
 *     CommentForm
 *     CommentList
 *        Comment
 */

代码片断

// commentList
    interface Data{
      id: number;
      author: string;
      text: string;
    }
    interface CommentListProps{
      data: Data[];
    }
    class CommentList extends React.Component<CommentListProps, any>{
      public render(){
        let commentNodes = this.props.data.map(comment => {
          return (
            <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
          );
        });
        return (
          <div className="commentList">
            {commentNodes}
          </div>
        );
      }
    }
// Comment
    interface CommentProps{
      author: string; 
    }
    interface CommentState{
    
    }
    class Comment extends React.Component<CommentProps, CommentState>{
      public render(){
        return (
          <div>
            <h2>{this.props.author}</h2>
            {this.props.children}
          </div>
        );
      }
    }
// CommentForm 
    interface CommentFormProps{
      //onCommentSubmit:({author: string, text: string}) => any
    }
    interface CommentFormState{
      author: string;
      text: string;
    }
    class CommentForm extends React.Component<CommentFormProps, CommentFormState>{
      constructor(props, CommentFormProps) {
        super(props);
        this.state = {
            author: '',
            text: ''
        };
      }
      public handleAuthorChange(e){
        this.setState({author: e.target.value});
      }
      public handleTextChange(e) {
        this.setState({text: e.target.value});
      }
      public handleSubmit(e){
        e.preventDefault();
        let author = this.state.author.trim();
        let text = this.state.text.trim();
        if(!text || !author){return;}
        this.props.onCommentSubmit({author: author, text: text});
        this.setState({author:'',text:''});
      }
      public render(){
        return (
          <form onSubmit={this.handleSubmit.bind(this)} className="commentForm">
            <input type="text" placeholder="请输入你的名字" value={this.state.author} onChange={this.handleAuthorChange.bind(this)}/>
            <input className="text" type="text" placeholder="请输入要评论的内容" value={this.state.text} onChange={this.handleTextChange.bind(this)}/>
            <input type="submit" value="提交"/>
          </form>
        );
      }
    }

// CommentBox}
    interface CommentBoxState{
      data: Data[];
    }
    class CommentBox extends React.Component<any, CommentBoxState>{
      constructor(props, CommentBoxProps) {
        super(props);
        this.state = {
            data: [{id: 1, author: "星期五", text: "很差吃，环境也很差"},
              {id: 2, author: "刘馨儿", text: "还行吧···"}],
        };
      }
      public loadCommentsFromServer(){
        /*  url请求的数据-----如今没有数据
        this.setState({data: [{id: 1, author: "张三", text: "太假了"},
              {id: 2, author: "李四", text: "明天会更好"}]});
        */
      }
      public componentDidMount(){
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval);
      }
      public handleCommentSubmit(comment) {
        comment.id = Date.now();
        let comments = this.state.data.concat([comment]);
        this.setState({data: comments});
      }
      public render(){
        return (
          <div>
            <h1>评论</h1>
            <CommentList data={this.state.data}/>
            <CommentForm onCommentSubmit={this.handleCommentSubmit.bind(this)}/>
          </div>
        );
      }
    }
//添加
    ReactDOM.render(<CommentBox pollInterval={2000}/>, document.getElementById("example"));

结尾

此组件是根据react 官网 给出的一个例子编写的，有兴趣的同窗可参考官网。这里，告诉你们另外一个不用配置环境也可练习代码的在线工具：webpackBin，如图可见，可根据你的需求配置：