【13】前端实习：react 组件的使用与拆分

最新推荐文章于 2023-03-28 13:44:33 发布

BBbila

最新推荐文章于 2023-03-28 13:44:33 发布

阅读量157

点赞数

分类专栏： react 前端文章标签： react 组件拆分前端

本文链接：https://blog.csdn.net/qq_40610760/article/details/100098325

版权

前端同时被 2 个专栏收录

62 篇文章 2 订阅

订阅专栏

react

21 篇文章 0 订阅

订阅专栏

单页定义组件

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 定义常量 message
const message ={
  date: new Date(),
  user:{
    imgUrl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2202924937,2953206766&fm=26&gp=0.jpg",
    imgdes:"这是一个小猫"
  }
}

// 定义一个comment的组件
function Comment(props) {
  return (
    <div>
      <div>
        <img src={props.user.imgUrl} alt={props.user.imgdes}></img>
      </div>
      <div>
        <ul>
          <li>{props.text}</li>
          <li>{props.text}</li>
          <li>{props.text}</li>
        </ul>
      </div>
      <div>
        {/* 使用props.date可以取得定义在message常量里的date的值 */}
        {getNowDate(props.date)}
      </div>
    </div>
  )
}

function getNowDate(date){
  return date.toLocaleDateString();
}

ReactDOM.render(
  <Comment
    date={message.date}
    text="this is text"
    user={message.user}
  ></Comment>,
  document.getElementById('root')
  );


serviceWorker.unregister();

继续拆分组件：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 定义常量 message
const message ={
  date: new Date(),
  user:{
    imgUrl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2202924937,2953206766&fm=26&gp=0.jpg",
    imgdes:"这是一个小猫"
  }
}


//将图片拆分成组件
function Cat(props) {
  return (
  <div>
    <img src={props.user.imgUrl} alt={props.user.imgdes}></img>
  </div>
  )
}

//将列表拆分成组件
function List(props) {
  return (
    <div>
      <ul>
        <li>{props.text}</li>
        <li>{props.text}</li>
        <li>{props.text}</li>
      </ul>
    </div>
  )
}

// 定义一个comment的组件
function Comment(props) {
  return (
    <div>
      <Cat user={props.user}></Cat>
      <List text="这是可爱的小猫"></List>
      <div>
        {/* 使用props.date可以取得定义在message常量里的date的值 */}
        {getNowDate(props.date)}
      </div>
    </div>
  )
}

function getNowDate(date){
  return date.toLocaleDateString();
}

ReactDOM.render(
  <Comment
    date={message.date}
    user={message.user}
  ></Comment>,
  document.getElementById('root')
  );


serviceWorker.unregister();

效果：