关于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 屡次复用 Welcome
function 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 的元素和组件用法详解！