React-----Composition(构造)VS Inheritance(继承)

来源：互联网发布：dwg文件查看器 mac 编辑：程序博客网时间：2024/06/01 19:14

概述：

我们该如何选择是构造还是继承。

1.包含

对于对话框和工具栏不确定它包含的内容，可用children进行注入

代码：

function FancyBorder(props) {  return (    <div className={'FancyBorder FancyBorder-' + props.color}>      {props.children}    </div>  );}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('root'));

.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;}

总结：

1.对于有计算用{}进行包裹
2.children表示标签包含的子标签

2.对于不是一个整体加入情况

比如布局

css样式：

html, body, #root {  width: 100%;  height: 100%;}.SplitPane {  width: 100%;  height: 100%;}.SplitPane-left {  float: left;  width: 30%;  height: 100%;}.SplitPane-right {  float: left;  width: 70%;  height: 100%;}.Contacts {  width: 100%;  height: 100%;   background: lightblue;}.Chat {  width: 100%;  height: 100%;   background: pink;}

JS代码：

function Contacts() {  return <div className="Contacts" />;}function Chat() {  return <div className="Chat" />;}function SplitPane(props) {  return (    <div className="SplitPane">      <div className="SplitPane-left">        {props.left}      </div>      <div className="SplitPane-right">        {props.right}      </div>    </div>  );}function App() {  return (    <SplitPane      left={        <Contacts />      }      right={        <Chat />      } />  );}ReactDOM.render(  <App />,  document.getElementById('root'));

总结：只要引用变量和标签内部嵌入标签变量，只能用{},如果不是整体可以用变量替代。

3.如果你定义一个模板（类似框架），只是数据不同，比如对话框

效果图：

分三部分：

1.MarsExploration Program是标题，2.How should we refer to you ? 是信息，3.输入框和按钮是children

代码：

CSS:

.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;}

JS:

function FancyBorder(props) {  return (    <div className={'FancyBorder FancyBorder-' + props.color}>      {props.children}    </div>  );}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}!`);  }}ReactDOM.render(  <SignUpDialog />,  document.getElementById('root'));

总结：1.不断封装，

2.alert(`Welcome aboard, ${this.state.login}!`); 慢慢捡一点知识，发现没有对于在字符串引用变量除了加{}还要$符号。

构造全屏脑洞大开。。。。。自由发挥了

参考官方文档https://facebook.github.io/react/docs/composition-vs-inheritance.html

阅读全文

0 0