React的元素和组件用法详解！ react.js

一、元素 React 的最小单位是元素，一旦创建，其子元素、属性等都无法更改。

// 假设HTML文件中有个元素：// 创建element元素，传递给React渲染，并加载到父容器(id=root)下 const element = Hello, world; ReactDOM.render(element, document.getElementById('root'));

二、组件组件是有多个元素组成，可以分为 class组件 和 函数组件 。
1、class组件

// class组件 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } }

2、函数组件

// 普通函数写函数组件 function Welcome(props) { return Hello, {props.name}; }// 箭头函数写函数组件 const Welcome = (props) => { return Hello, {props.name}; }

3、组件复用

// 组件App多次复用Welcome function Welcome(props) { return Hello, {props.name}; }function App() { return ( ); }ReactDOM.render( , document.getElementById('root') );

4、动态构建组件根据条件，创建不同组件。

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; }ReactDOM.render( // Try changing to isLoggedIn={true}: , document.getElementById('root') );

5、map遍历构建元素

// 用数组动态构建组件 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); }const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

三、组件的属性及方法 【React的元素和组件用法详解！】详情，看这里!
四、参考链接：