首页 > 其他 > 详细

关于React的组件

时间:2019-08-07 21:53:47      阅读:93      评论:0      收藏:0      [点我收藏+]

一、组件的定义

 

1、使用JavaScript函数定义 Welcome.js

import React from ‘react‘;

function Welcome() {
  return (
    <div>我是一个组件</div>
  );
}

export default Welcome;

 

2、使用 ES6 class 定义 Welcome.js

import React, {
  Component
} from ‘react‘;

class Welcome extends Component {
  render() {
    return (
      <div>我是一个组件</div>
    );
  }
}

export default Welcome;

 

 

二、组件的渲染

index.js 文件:

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import Welcome from ‘./Welcome‘;

ReactDOM.render(
  <Welcome />,
  document.getElementById(‘root‘)
);

 

 

三、复合组件

 

1、通过创建多个组件来合成一个组件

import React from ‘react‘;

function Name(props) {
  return (
    <p>我是{props.name}</p>
  );
}

function Age(props) {
  return (
    <p>我{props.age}岁</p>
  );
}

function Sex(props) {
  return (
    <p>我是一个{props.sex}人</p>
  );
}

function Me() {
  return (
    <div>
      <Name name="海牛大大" />
      <Age age="22" />
      <Sex sex="男" />
    </div>
  );
}


export default Me;

 

2、渲染合成的组件

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import Me from ‘./Me‘;

ReactDOM.render(
  <Me />,
  document.getElementById(‘root‘)
);

运行结果:

技术分享图片

 

关于React的组件

原文:https://www.cnblogs.com/Leophen/p/11317717.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!