react 生成標簽的幾種方式
/*
* jsx 命名規(guī)范:
* React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。
*
React DOM 首先會比較元素內容先后的不同，而在渲染過程中只會更新改變了的部分。ps:是不是意味著要勁量的使單個組件不要太大?
* */
//要渲染 HTML 標簽，只需在 JSX 里使用小寫字母的標簽名。
//注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。
// 除此之外還需要注意組件類只能包含一個頂層標簽，否則也會報錯。如el2
//單個標簽直接寫,不推薦
const el1 = <h1>這是第一個標簽元素</h1>;
ReactDOM.render(
el1, document.getElementById('el1')
);
//建議使用div 或者括號包裹起來
const el2 = <div>
<h1>這是第二個標簽元素</h1>
<span>代碼中嵌套多個 HTML 標簽，需要使用一個標簽元素包裹它</span>
</div>;
ReactDOM.render(
el2, document.getElementById('el2')
);
//使用括號包裹起html標簽, 推薦
const el3 = (
<div>
<h1>這是第三個標簽元素</h1>
<span>代碼中嵌套多個 HTML 標簽，需要使用一個標簽元素包裹它</span>
</div>
);
ReactDOM.render(
el3, document.getElementById('el3')
);
//要渲染 React 組件，只需創(chuàng)建一個大寫字母開頭的本地變量。
const El4 = React.createClass({
render: function () {
return <div>
<h1>這是第4個組件</h1>
<span>以組件方式定義</span>
</div>
}
});
ReactDOM.render(
<El4/>, document.getElementById('el4')
);
//組件定義方式2
function El5(props) {
return <div>
<h1>這是第5個標簽組件 {props.selfVal}</h1>
<span>以組件方式定義</span>
</div>
}
ReactDOM.render(
<El5/>, document.getElementById('el5')
);
//方式3 使用 ES6 class 來定義一個組件:
class El6 extends React.Component {
render() {
return <div>
<h1>這是第6個標簽組件</h1>
<span>以組件方式定義</span>
</div>
}
}
ReactDOM.render(
<El6/>, document.getElementById('el6')
);
//拓展寫法
const el7 = <El5 selfVal='重寫為第7組件'/>;
ReactDOM.render(
el7, document.getElementById('el7')
);
//todo 嘗試樣式
const elStyle = (
<div>
<h1 className='titleStyle'>這是測試樣式</h1>
</div>
);
ReactDOM.render(
elStyle, document.getElementById('el8')
);
// 大括號內大引號為字符串,不帶則為變量
const elStyle2= (
<div>
<h1 className={'ttBlue'}>這是測試樣式2s</h1>
</div>
);
ReactDOM.render(
elStyle2, document.getElementById('el9')
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test React </title>
<link rel="stylesheet" href="../css/createElementDemo.css">
</head>
<body>
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</body>
<script src="../js/lib/react.min.js"></script>
<script src="../js/lib/react-dom.min.js"></script>
<script src="../js/lib/babel.min.js"></script>
<script type="text/babel" src="../js/comment/createElemeteDemo.js">
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
