react的composition

 

   组件本身更多是作为一个容器,它所包含的内容可能是动态的、未预先定义的。这时候它的内容取决另一个组件或外部的输入。比如弹层。       

     

props.children:

React在组件中提供了props.children这个内置变量。当我们创建一个用作容器的组件时,在其返回的JSX中插入{props.children},此时{props.children}表示将来容器中需要插入的的内容。

比如我们创建一个带边框的div作为容器,

function FancyBorder(props) {
return (


{props.children}

);
}

以后某个组件在输出的模板中调用了FancyBorder后,所有位于标签内的内容将被看作FancyBorder组件的props.children

在日常的UI构建中,经常会遇到一种情况:组件本身更多是作为一个容器,它所包含的内容可能是动态的、未预先定义的。这时候它的内容取决另一个组件或外部的输入。比如弹层。

props.children:

React在组件中提供了props.children这个内置变量。当我们创建一个用作容器的组件时,在其返回的JSX中插入{props.children},此时{props.children}表示将来容器中需要插入的的内容。

比如我们创建一个带边框的div作为容器,

 

/一个带边框的div组件
function FancyBorder(props) {
return (


{props.children}

);
}

以后某个组件在输出的模板中调用了FancyBorder后,所有位于标签内的内容将被看作FancyBorder组件的props.children。

 

function WelcomeDialog() {
   return (
     
       

Welcome

Thank you for visiting our spacecraft!

); }

当然,更普遍的情况是,我们要分发到容器上的内容,是需要指定位置的。

比如某段文字应该放在容器的右边,而某条评论或图片放在左边。这时候怎么办呢?

props.children给了我们启发。

JSX,也即要渲染的内容,可以作为参数prop传递给组件,然后在组件中恰当的位置进行渲染。要知道,React Element用typeof操作符判断时,其输出是‘object’,对象当然可以作为参数传递给函数啦!

function SplitPane(props) {
return (



{props.left}


{props.right}


);
}

function App() {
return (
left={

}
right={

} />
);
}

这就解决了组件内容的嵌套和分发。

在React构建UI组件时,变量、方法、组件都可以作为props传递给子组件,实现单向的数据传输。

props.children分发容器标签之中的内容

props.xxx 分发其他指定内容

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

             

你可能感兴趣的:(react的composition)