美文网首页
React 组合关系

React 组合关系

作者: 我的天气很好啦 | 来源:发表于2020-12-18 16:17 被阅读0次
    // 使用JSX去调用组件
    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>
      );
    }
    
    // 将组件通过组件的自定义props来传递,而不是通过props.children来传递
    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 />
          } />
      );
    }
    

    相关文章

      网友评论

          本文标题:React 组合关系

          本文链接:https://www.haomeiwen.com/subject/avaxnktx.html