目錄
1.children
一個組件通過 props 除了能給獲取自身屬性上的值,還可以獲取被組件包含的內容,也就是外部子組件,前面我們寫的組件更多的是作爲一個單標籤組件,實際應用中很多組件是雙標籤的,也就是可以包含內容的,也可稱爲:容器組件,那麼組件包含的內容,我們就可以通過 props.children 來獲取。
1.1dialog 組件
需求:對話框標題和內容可變。如,警告,提示等。當對話框內容,使用表單或表格實現時比較複雜,直接加載表單或表格,頁面結構會混亂冗雜。
通過props屬性將標籤,表單,列表等內容傳遞到子組件,子組件中需要使用到的地方通過this.props.children加載傳遞過來的內容即可。
1.1.1CSS
.dialog {
position: fixed;
left: 50%;
top: 30%;
transform: translateX(-50%) translateY(-50%) ;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
box-sizing: border-box;
background: #fff;
width: 30%;
}
.dialog_header {
padding: 20px 20px 0;
text-align: left;
}
.dialog_title {
font-size: 16px;
font-weight: 700;
color: #1f2d3d;
}
.dialog_content {
padding: 30px 20px;
color: #48576a;
font-size: 14px;
text-align: left;
}
.dialog_close_btn {
position: absolute;
right: 10px;
top: 5px;
}
.dialog_close_btn:before {
content: 'x';
color: #999;
font-size: 20px;
cursor: pointer;
}
1.1.2 dialog.js
import React from 'react';
import '../css/dialog.css'
class Dialog extends React.Component {
static defaultProps = {
title: '這是默認標題'
}
render() {
return (
<div className="dialog">
<i className="dialog_close_btn"></i>
<div className="dialog_header">
<span className="dialog_title">{this.props.title}</span>
</div>
<div className="dialog_content">
{this.props.children}
</div>
</div>
);
}
}
export default Dialog;
1.1.3App.js
import React from 'react';
import './App.css';
import Dialog from './components/Dialog';
function App() {
return (
<div className="App">
<Dialog title={"警告"}>
{/* 整個form表單都是作爲內容傳遞給子組件Dialog,子組件通過this.props.children可以得到整個form表單結構 */}
<form id="dialog_form" method="post">
用戶名:<input type="text" name="name" />
</form>
</Dialog>
</div>
);
}
export default App;
效果: