【react 全家桶】组合组件

本人大二学生一枚，热爱前端，欢迎来交流学习哦，一起来学习吧。
<专栏推荐>
🔥：js专栏

🔥：vue专栏

🔥：react专栏

09 【组合组件】

1.包含关系

有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。

我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：

组件标签里面包含的子元素会通过 props.children 传递进来。

function One(props) {return (<div>{props.children}</div>//特殊的children props);
}function Two(props) {return (//这使别的组件可以通过JSX嵌套，来将任意组件作为子组件来传递给他们<One><div>Hello</div><div>World</div></One>
);
}

2.特例关系问题

有些时候，我们会把一些组件看作是其他组件的特殊实例，比如 WelcomeDialog 可以说是 Dialog 的特殊实例。

在 React 中，我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件：

.FancyBorder {padding: 10px 10px;border: 10px solid;
}.FancyBorder-blue {border-color: blue;
}.Dialog-title {margin: 0;font-family: sans-serif;
}.Dialog-message {font-size: larger;
}

function Dialog(props) {return (<FancyBorder color="blue"><h1 className="Dialog-title">{props.title}</h1><p className="Dialog-message">{props.message}</p></FancyBorder>);
}function WelcomeDialog() {return (<Dialogtitle="Welcome"message="Thank you for visiting our spacecraft!" />);
}

在 CodePen 上尝试

组合也同样适用于以 class 形式定义的组件。

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}!`);}
}

在 CodePen 上尝试