React中組件封裝

一、JS打包入口文件 main.js 

    1、代碼

/* JS打包入口文件 */
//1、導入react包
import React from "react";
import ReactDOM from "react-dom";
 
import CommentList from "./components/CommenList.jsx";
import CommentItem from "./components/CommentItem.jsx";
 
import "./css/CommenList.css";
var myDiv = (
  <div>
    <CommentList></CommentList>
  </div>
);
ReactDOM.render(myDiv, document.getElementById("app"));

    2、文件結構

 

二、CommenList.jsx組件

import React from "react";
//導入當前組建需要的子組件
import CommentItem from "./CommentItem.jsx";
export default class CommentList extends React.Component {
  constructor(props) {
    super(props);
 
    //定義一個當前評論列表組件的私有數據
    this.state = {
      cmts: [
        { user: "張大仙", content: "王者峽谷見" },
        { user: "一眼萬年", content: "刺激戰場我最強" },
        { user: "安其拉", content: "收起你的憐憫" },
        { user: "凱帝", content: "希望天下無仇" },
        { user: "李白", content: "一尊清酒，一把寶劍" },
        { user: "牛魔", content: "平天大聖，不服來戰" },
        { user: "程咬金", content: "戰斗，哪怕只剩最后一滴血" },
      ],
    };
  }
  //在【有狀態組件】中，render函數是必須的，表示渲染哪些虛擬DOM元素並展示出來
  render() {
    console.log("this.state:" + JSON.stringify(this.state));
    /*
      注意：
        1、我們可以直接在JSX語法內部，使用數組的map函數，來遍歷數組的每一項，
           並使用map返回操作后的最新的數組
        2、將CommenList里面的每一項抽離成一個組件CommentItem
        3、{...item}寫法是es6的語法，將item逐一展開
    */
    return (
      <div>
        <h1 className="comm-title">評論列表</h1>
        {this.state.cmts.map((item, i) => {
          return (
            /* <CommentItem
              user={item.user}
              content={item.content}
              key={i}
            ></CommentItem> */
            <CommentItem {...item} key={i}></CommentItem>
          );
        })}
      </div>
    );
  }
}

    注意：CommenList組件循環遍歷數據，將每一項的item數據通過組件傳值的方式傳給CommenItem組件

 

三、CommenItem.jsx組件

import React from "react";
import cmtItemStyles from "./cmtItemStyles.js";
 
//封裝一個評論【無狀態組件】
export default function CommentItem(props) {
  //樣式的右方優化方式1：
  const boxStyle = {
    fontSize: 16,
    color: "purple",
  };
  //樣式的優化方式2：
  const inlineStyles = {
    boxStyle2: {
      fontSize: 14,
      color: "red",
    },
  };
  let date = new Date();
  let Y = date.getFullYear();
  let M = date.getMonth() + 1;
  let D = date.getDay();
  return (
    /*
      1、如果要使用style屬性，為JSX語法創建的DOM元素設置樣式，不能像網頁中
      那樣寫，而是要使用js語法來寫
      2、外層{}表示是JS代碼；內層的{}是指用JS對象來表示
      3、在style的樣式規則中，如果屬性值的單位是px,則可以省略px,直接寫一個數值即可
    */
    <div
      style={{
        border: "1px solid #ccc",
        margin: "10px 0",
        paddingLeft: "15px",
        display: "flex",
        justifyContent: "space-between",
      }}
    >
      <h1 style={boxStyle}>評論人：{props.user}</h1>
      <h2 style={inlineStyles.boxStyle2}>評論內容：{props.content}</h2>
      <h2 style={cmtItemStyles.boxStyle3}>
        時間：{Y + "年" + M + "月" + D + "日"}
      </h2>
    </div>
  );
}

注意：CommenItem組件由function創建的，我們通過propes形參來接收CommenList組件傳遞過來的數據，然后渲染每一項。

 

四、運行結果

 

五、分析

      該評論列表整體是一個組件，但是我們在實現的時候，希望代碼具有更好的可讀性、維護性，所以將這個評論組件可以分為兩個組件：

       1、是CommenList組件，這個組件里面主要的功能是獲取/定義評論列表的數據，然后我們需要渲染在主頁里面，渲染的時候必定會循環遍歷這些數據，然后再次循環渲染每一項。

       2、為了更好的實現代碼的健壯性，我們將循環渲染每一項這個動作交給CommenItem組件。