迅速学习React 笔记 day4

下面这几个抽象关系感觉不是特别重要完全看自己怎么设计，
可以拿下面2种官方的例子做个参考
另外还有个继承

包含

function Contacts() {
  return 
;
}

function Chat() {
  return 
;
}

function SplitPane(props) {
  return (
    

      

        {props.left}
      
      

        {props.right}
      
    
  );
}

function App() {
  return (
    
      }
      right={
        
      } />
  );
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

特例

function FancyBorder(props) {
  return (
    

      {props.children}
    
  );
}

function Dialog(props) {
  return (
    
      

        {props.title}
      
      

        {props.message}
      
      {props.children}
    
  );
}

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 (
      

        
        
          Sign Me Up!
        
      
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);