//仈 組合 and 繼承
//包含
function FancyBorder(props) {
//children 屬性將子元素直接傳遞到輸出。 將子元素傳遞過來
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
//<FancyBorder> JSX 標籤內的任何內容都將通過 children 屬性傳入 FancyBorder。
//由於 FancyBorder 在一個 <div> 內渲染了 {props.children}，所以被傳遞的所有元素都會出現在最終輸出中
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
ReactDOM.render(
<WelcomeDialog/>,
document.getElementById('note8')
)
//多個子元素 傳入
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
//類似 <Contacts /> 和 <Chat /> 這樣的 React 元素都是對象，所以你可以像任何其他元素一樣傳遞它們
//自定義 屬性
// function App3() {
// return (
// <SplitPane
// left={
// <Contacts />
// }
// right={
// <Chat />
// } />
// );
// }
//通過組合來實現的，通過配置屬性用較特殊的組件來渲染較通用的組件
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog2() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
// 類中組合
// function Dialog(props) {
// return (
// <FancyBorder color="blue">
// <h1 className="Dialog-title">
// {props.title}
// </h1>
// <p className="Dialog-message">
// {props.message}
// </p>
// {props.children}
// </FancyBorder>
// );
// }
// class SignUpDialog extends React.Component {
// constructor(props) {
// super(props);
// this.handleChange = this.handleChange.bind(this);
// this.handleSignUp = this.handleSignUp.bind(this);
// this.state = {login: ''};
// }
// render() {
// return (
// <Dialog title="Mars Exploration Program"
// message="How should we refer to you?">
// <input value={this.state.login}
// onChange={this.handleChange} />
// <button onClick={this.handleSignUp}>
// Sign Me Up!
// </button>
// </Dialog>
// );
// }
// handleChange(e) {
// this.setState({login: e.target.value});
// }
// handleSignUp() {
// alert(`Welcome aboard, ${this.state.login}!`);
// }
// }