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，如圖可見，可根據你的需求配置：