web前端高级React - React从入门到进阶之组件的组合使用

系统管理员 2023-01-08 04:23 108阅读 0赞

### 系列文章目录 ###

[第一章：React从入门到进阶之初识React][React_React]  
[第一章：React从入门到进阶之JSX简介][React_JSX]  
[第三章：React从入门到进阶之元素渲染][React]  
[第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤][React_JSX_DOM_DOM]  
[第五章：React从入门到进阶之组件化开发及Props属性传值][React_Props]  
[第六章：React从入门到进阶之state及组件的生命周期][React_state]  
[第七章：React从入门到进阶之React事件处理][React_state]  
[第八章：React从入门到进阶之React条件渲染][React_React 1]  
[第九章：React从入门到进阶之React中的列表与key][React_React_key]  
[第十章：React从入门到进阶之表单及受控组件和非受控组件][React 1]  
[第十一章：React从入门到进阶之组件的状态提升][React 2]  
[第十二章：React从入门到进阶之组件的组合使用][React 3]

### 文章目录 ###

*   *   *  系列文章目录
         *  包含关系组合
         *  特例关系

### 包含关系组合 ###

> 有些时候我们在开发一些通用组件的时候，我们并不能提前知晓它们的子组件的具体内容。比如我们要做一个上下左右布局的页面（即：头部header，左边siderBar，右边Container），这个时候要求右侧的container是要动态显示内容的。这个时候我们就需要使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：

function Container(props){ 
    	return <div className="container">
    		{ props.children}
    	</div>
    }
    
    function HomePage(props){ 
    	return <>
    		<Container>
    			 <h1 className="title">
            		Hello world
          		</h1>
          		<p className="content">
            		我要显示在container里面!
          		</p>
    		</Container>
    	</>
    }

>  *  上面代码中我们Container容器组件，这个组件只是返回一个div然后把props的children属性整体作为div标签的内容
>  *  然后我们在HomePage组件中使用Container组件，Container标签中的所有内容都会作为一个 children prop 传递给 Container组件。因为 我们在Container中将 \{props.children\} 渲染在一个 < div> 中，被传递的这些子组件最终都会出现在输出结果中。

> 另外还有一些情况，我们可能不像container那样把所有的子组件都包含进来，而是大部分内容是固定的，只有一小部分值动态变化的。这个时候我们就需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用 children，而是自行约定：将所需内容传给 props，并使用相应的 prop。比如一个聊天内容窗格中，左侧显示联系人，右侧显示聊天内容，其中联系人和聊天内容都是单独的组件，需要主窗格预留出两块空间来显示其它两个组件：

function ChatRoom(props) { 
      return (
        <div>
          <div className="left">
            { props.concat}
          </div>
          <div className="right">
            { props.message}
          </div>
        </div>
      );
    }
    
    function App() { 
      return (
        <ChatRoom
          concat={ 
            <Contacts />
          }
          message={ 
            <Chat />
          } />
      );
    }

> 上面的代码中 < Contacts /> 和 < Chat /> 之类的 React 元素本质就是对象（object），所以我们可以把它们当作 props，像其他数据一样传递。这种方法就类似于Vue中“插槽”（slot）的概念，但在 React 中没有“插槽”这一概念的限制，我们可以将任何东西作为 props 进行传递。

### 特例关系 ###

> 有些时候，我们会把一些组件看作是其他组件的特殊实例，比如 WelcomeDialog 可以说是 Dialog 的特殊实例。  
> 在 React 中，我们也可以通过组合来实现这一点。“特殊”组件可以通过 props 定制并渲染“一般”组件：

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 (
        <Dialog
          title="Welcome"
          message="Thank you for visiting our spacecraft!" />
      );
    }

> 上面都是以函数组件作为示例来讲解的，那么组合同样也适合在类组件中使用：

> 好了本章内容就介绍到这里，这节的内容比较简单，同时这也是本系列文章中入门级的最后一篇文章。  
> [下一章节][Link 1]开始我们将学习一些React进阶方面的知识，敬请期待。

[React_React]: https://blog.csdn.net/lixiaosenlin/article/details/112238757
[React_JSX]: https://blog.csdn.net/lixiaosenlin/article/details/112250656
[React]: https://blog.csdn.net/lixiaosenlin/article/details/112252554
[React_JSX_DOM_DOM]: https://blog.csdn.net/lixiaosenlin/article/details/111993181
[React_Props]: https://blog.csdn.net/lixiaosenlin/article/details/112260171
[React_state]: https://blog.csdn.net/lixiaosenlin/article/details/112314897
[React_React 1]: https://blog.csdn.net/lixiaosenlin/article/details/112361974
[React_React_key]: https://blog.csdn.net/lixiaosenlin/article/details/112369657
[React 1]: https://blog.csdn.net/lixiaosenlin/article/details/112443722
[React 2]: https://blog.csdn.net/lixiaosenlin/article/details/112684837
[React 3]: https://blog.csdn.net/lixiaosenlin/article/details/112796433
[Link 1]: https://blog.csdn.net/lixiaosenlin/article/details/112850955