blocks|key|1285125|text|props.children是一种道具，就像其他每一种道具一样，但是它在标记之间传递的方式不同(当使用JSX时)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1285126|<Component>text</Component>|code-block|syntax|javascript|1285127|您在标记之间放置的内容将作为props.children传递给组件。It+可以是|CODE|1285128|未定义、null、布尔值、数字、字符串、React元素或任何这些类型的数组都是递归的。|blockquote|1285129|它也可以是一个函数，返回上面的一个来创建渲染道具图案。。|1285130|如果您想直接处理children支柱(filter或map+)，您可能需要一些反应效用函数。|1285131|差不多就是这样。当然，在反应文件。中还有更多的细节|1285132|entityMap|0|LINK|mutability|MUTABLE|url|https://flow.org/en/docs/react/types/#toc-react-node|1|https://reactjs.org/docs/render-props.html#___gatsby|2|https://reactjs.org/docs/react-api.html#reactchildren|3|https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx^0|0|E|0|0|E|E|11|3|0|0|0|K|7|1|0|8|8|J|6|Q|3|13|6|2|0|C|5|3|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1E|8|@$9|1F|A|1G|B|M]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|N|3|O|5|P|7|1K|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|S|3|T|5|6|7|1P|8|@$9|1Q|A|1R|B|M]|$9|1S|A|1T|B|M]|$9|1U|A|1V|B|M]]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|U|3|V|5|6|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|W|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|17]]|18|$5|Z|10|11|E|$12|19]]]]

props.children is a prop like every other prop in React, but it's passed differently (when using JSX) between tags:

<pre><code>&lt;Component&gt;text&lt;/Component&gt;
</code></pre>

What you put between the tags will be passed to component as <code>props.children</code>. It <a href="https://flow.org/en/docs/react/types/#toc-react-node" rel="nofollow noreferrer">can be</a>:

<blockquote>
 undefined, null, a boolean, a number, a string, a
 React element, or an array of any of those types recursively.
</blockquote>

It can also be a function that returns one of the above ^ to create <a href="https://reactjs.org/docs/render-props.html#___gatsby" rel="nofollow noreferrer">render prop pattern.</a>

If you want to directly work on <code>children</code> prop (<code>filter</code> or <code>map</code> them), you will probably need some <a href="https://reactjs.org/docs/react-api.html#reactchildren" rel="nofollow noreferrer">React utility functions</a>.

That's pretty much it. There are of course more details in <a href="https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx" rel="nofollow noreferrer">React documentation.</a>

blocks|key|174924|text|通常，每个组件的子组件实际上是一个数组。但是，当只有一个子组件时，props.children将是没有数组包装器的单个子组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|174925|因此，在本例中：const+aux+=+(props)+=>+props.children;将返回一个组件。|offset|length|style|CODE|174926|entityMap^0|0|8|12|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Usually, each component's children is actually an array. but when there is only a single child, props.children will be the single child component having no array wrapper.

So in this case : <code>const aux = (props) =&gt; props.children;</code>
this will return a component.

blocks|key|174978|text|在创建容器组件时，通常使用props.children，其中容器组件将在不同实例中具有不同类型的子组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|174979|class+Container+extends+React.Component{
++render(){
++++return(
++++++<div>
++++++++<div+className="Header">AppName</div>
++++++++{props.children}
++++++</div>
++++)
++}
}|code-block|syntax|javascript|174980|容器组件可以像，|174981|<Container>
++<div>foo</div>
</Container>|174982|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

props.children is usually used while creating container components where container components will have different types of child components at different instances.

<pre><code>class Container extends React.Component{
 render(){
 return(
 &lt;div&gt;
 &lt;div className="Header"&gt;AppName&lt;/div&gt;
 {props.children}
 &lt;/div&gt;
 )
 }
}
</code></pre>

The container component can be used like,

<pre><code>&lt;Container&gt;
 &lt;div&gt;foo&lt;/div&gt;
&lt;/Container&gt;
</code></pre>

blocks|key|1285280|text|该标准已被内置，以反应16.3和取代的只是<>。当您需要呈现多个组件时，您将使用它，但由于样式或任何其他原因，您不希望将它们包装为i。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1285281|例如：|1285282|+++++<CustomeHeader+/>
+++++<CustomTable+/>
+++++<CustomFooter+/>|code-block|syntax|javascript|1285283|不能在反应中呈现，但：|1285284|+++++<>
+++++++<CustomeHeader+/>
+++++++<CustomTable+/>
+++++++<CustomFooter+/>
+++++</>|1285285|或者：|1285286|+++<aux>
++++++<CustomeHeader+/>
++++++<CustomTable+/>
++++++<CustomFooter+/>
+++</aux>|1285287|以上两种方法都是可行的。Aux或<>里面有什么？|1285288|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

The standard has been built in to react 16.3 and replaced as just &lt;>. You would use this when you need to render multiple components but do not wish to wrap them i a due to styling or any other number of reasons.

for example :

<pre><code> &lt;CustomeHeader /&gt;
 &lt;CustomTable /&gt;
 &lt;CustomFooter /&gt;
</code></pre>

can not be rendered in react but :

<pre><code> &lt;&gt;
 &lt;CustomeHeader /&gt;
 &lt;CustomTable /&gt;
 &lt;CustomFooter /&gt;
 &lt;/&gt;
</code></pre>

or:

<pre><code> &lt;aux&gt;
 &lt;CustomeHeader /&gt;
 &lt;CustomTable /&gt;
 &lt;CustomFooter /&gt;
 &lt;/aux&gt;
</code></pre>

both above will work. whats inside the Aux or &lt;>

I am following this tutorial and the instructor did something like this to explain Higher order component 

<pre><code>const aux = (props) =&gt; props.children;

export default aux;
</code></pre>

and then imported this to some other file and replaced <code>div</code> tag with, for say <code>&lt;Aux&gt;</code> tag. 

Now, It's sort of hard for me to understand this because I am not really sure what <code>props.children</code> actually do (since we hardly used it previously throughout our lectures).

I did some googling and went through an article or two on web but for some reason, their description was vey vague. 

Can someone explain me the use of <code>props.children</code> in general?

What is props.children?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在学习本教程，导师做了类似的事情来解释高阶组件。const aux = (props) => props.children;export default aux;然后将这个导入到其他文件中，并将div标记替换为<Aux>标记。现在，我很难理解这一点，因为我不太确定props.children到底做了什么(因为我们以...

问props.children是什么？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问props.children是什么？EN