//仈 组合 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}!`);
// }
// }