react 组合, 包含 元素配合

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

// }

// }