关于react.js:React的元素和组件用法详解

一、元素

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

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

二、组件

组件是有多个元素组成，能够分为 class组件 和 函数组件 。

1、class组件

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

2、函数组件

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

3、组件复用

// 组件App屡次复用Welcomefunction Welcome(props) {    return <h1>Hello, {props.name}</h1>;}function App() {    return (        <div>            <Welcome name="Sara" />            <Welcome name="Cahal" />            <Welcome name="Edite" />        </div>    );}ReactDOM.render(    <App />,    document.getElementById('root'));

4、动静构建组件

依据条件，创立不同组件。

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

5、map遍历构建元素

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

三、组件的属性及办法

详情，看这里!

四、参考链接：

• React的元素和组件用法详解！