React---将组建单独抽离成.jsx文件

我们可以将index.js文件中的组件抽离出来，每个组件抽离为一个.jsx文件，再从index.js中到进来。

eg.

index.js:

import React from 'react';//创建组件，虚拟DOM元素，必须这么写
import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上展示的
import Hello from './components/Hello.jsx';
const dog={
    name:'大黄',
    age:3,
    gender:'熊'
}
ReactDOM.render(<div> 
    123
  <Hello {...dog}></Hello>
    </div>,
    document.getElementById('app')
);
var o2={
    age:22,
    address:'北京',
    phone:'139999'
}

var o1={
    name:'zs',
    ...o2
}

Hello.jsx

import React from 'react';//创建组件，虚拟DOM元素，必须这么写
export default function Hello(props){

//如果在一个组件中return一个null。则表示此组件是空的，什么都不会渲染

//在组件中，必须返回一个合法的JSX虚拟DOM元素
//props.name='zs'
console.log(props)
//结论：不论是vue还是react，组件中的props永远都是只读的，不能被重新赋值

return <div>这是Hello组件--- {props.name}--- {props.age}---{props.gender}</div>

}

//export default Hello

注意：

1.在抽离的.jsx文件中一定要引“import React from 'react';”

2.当抽离了Hello.jsx文件之后，在index.js文件中导入.jsx文件“import Hello from './components/Hello.jsx';”

扫描二维码关注公众号，回复： 3022058 查看本文章