一、組件

類組件

函數(shù)式組件

組件的嵌套

/*** rcc快捷鍵**/ import React, { Component } from "react";class Child extends Component {render() {return <div>Navbar's child</div>;} }class Navbar extends Component {render() {return (<div>Navbar<Child></Child></div>);} }function Swipper() {return <div>Swipper</div>; }const Tabbar = () => {return <div>Tabbar</div>; };export default class App extends Component {render() {return (<div><Navbar></Navbar><Swipper></Swipper><Tabbar></Tabbar></div>);} }

樣式

import React, { Component } from "react"; import "./css/01-index.css"; export default class App extends Component {render() {var name = "魚魚";var obj = {backgroundColor: "yellow",fontSize: "40px",};return (<div>{10 + 20} - {name}<div style={obj}>11111111</div><div style={{ background: "red" }}>11111111</div><div className="active">3333333333333333</div><div id="myapp">99999999999999</div><label htmlFor="username">用戶名：</label><input type="text" id="username"></input></div>);} } .active{background-color: aqua; } #myapp{background-color: brown; }

總結(jié)

以上是生活随笔為你收集整理的React基础（貳）———组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。