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组件。

猜你喜欢