組件分為函式式組件和類組件
函式式組件：
類組件
如果我們需要向組件傳遞引數，可以使用 this.props 物件
函式式組件使用props.屬性名
類組件使用this.props.屬性名
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
function Cyy1(props){
return(
<p>{props.name}</p>
)
}
class Cyy2 extends React.Component{
render(){
return(
<p>{this.props.name}</p>
)
}
}
ReactDOM.render(
<div>
<Cyy1 name='cyy1' />
<Cyy2 name='cyy2' />
</div>,
document.getElementById('example')
);
serviceWorker.unregister();
注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor
這是因為 class 和 for 是 JavaScript 的保留字，
復合組件
我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離，
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
function Name(props){
return(
<p>{props.name}</p>
)
}
function Age(props){
return(
<p>{props.age}</p>
)
}
ReactDOM.render(
<div>
<Name name='cyy1' />
<Age age='18' />
</div>,
document.getElementById('example')
);
serviceWorker.unregister();
組件名不一定是用單標簽，也可以是雙標簽
單標簽記得要用斜杠閉合
組件名內不能使用 style 樣式，例如：假設該組件名為 <HelloMessage />，如果寫成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 這樣是無效的
因此不能把樣式寫在該組件中！應該把樣式寫在：
function HelloMessage(props) { return <h1 style={{color:'red',textAlign:'center'}}>Hello World！</h1>; }
或者
var myStyle = {color:'red',textAlign:'center'} class HelloMessage extends React.Component { render() { return <h1 style={myStyle}>Hello World！</h1>; } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124769.html
標籤：JavaScript
上一篇：如何在檔案中添加腳本和參考js