React封装组件

第一种、构造函数方式

import logo from './logo.svg';
import './App.css';


let dade = [{dade:"dade6633377",dade2:666}]

function das(){
	return 888;
}

// 构造函数组件
function Dade(req){
	
	return (
		<div>
			{req.name}
			<h2>333</h2>
			<h2>333</h2>
		</div>
	)
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
		{/* 使用 */}
		<Dade name="dade987"></Dade>
		{das}
		<div className="dade">大得</div>
        <img src={logo} className="App-logo" alt="logo" />
		{/* 直接循环输出，不能使用for */}
		{dade.map(req=>{return <div>{req.dade}</div>})}
      </header>
    </div>
  );
}

export default App;

文件引入
文件名dadeGo.js

import React from 'react'

function Hello(){
	return (
		<div>dade369</div>
	)
}

export default Hello;

使用

import logo from './logo.svg';
import './App.css';
import dadeGo from './admin/dadeGo.js'


let dade = [{dade:"dade6633377",dade2:666}]

function das(){
	return 888;
}

// 构造函数组件
function Dade(req){
	
	return (
		<div>
			<dadeGo></dadeGo>
			{req.name}
			<h2>333</h2>
			<h2>333</h2>
		</div>
	)
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
		{/* 使用 */}
		<Dade name="dade987"></Dade>
		{das}
		<div className="dade">大得</div>
        <img src={logo} className="App-logo" alt="logo" />
		{/* 直接循环输出，不能使用for */}
		{dade.map(req=>{return <div>{req.dade}</div>})}
      </header>
    </div>
  );
}

export default App;