1包含关系
1.1 多数情况下
① 使用 children prop
来将子组件传递渲染
function FancyBorder(props) {
return (
<div className={ props.color }>
{ props.children }
</div>
)
}
② 使得别的组件可通过 jsx 嵌套,将任意组件作为子组件传递给它们
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1>Welcome</h1>
<p>Thank you for visiting our spacecraft!</p>
</FancyBorder>
)
}
1.2 少数情况:将所需要内容传入 props,并使用相应的 prop
function SplitPane(props) {
return (
<div>
<div>{ props.left }</div>
<div>{ props.right }</div>
</div>
)
}
function App() {
return (
<SplitPane
left={ <Contacts /> }
right={ <Chat /> }
>
)
}
2 特例关系
2.1 特殊组件可以通过 props
定制并渲染一般组件
function Dialog() {
return (
<FancyBorder color="blue">
<h1>{ props.title }</h1>
<p>{ props.message }</p>
</FancyBorder>
)
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!"
/>
)
}
2.2 组合 + 特殊组件
function Dialog() {
return (
<FancyBorder color="blue">
<h1>{ props.title }</h1>
<p>{ 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="Welcome"
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(e) {
talert(`Welcome abord, ${this.state.login}!`)
}
}
3 继承
如果你想要在组件间复用非 UI 的功能,我们建议将其提取为一个单独的 js 模块,如函数、对象或者类。
组件可以直接引入(import)而无需通过 extend 继承它们。