如何将React的props.children用于多个嵌套组件？
React的props.children属性可以用于多个嵌套组件中，可以通过以下几种方式进行使用：
- 直接传递props.children：在父组件中，将需要传递给子组件的内容作为props.children传递给子组件。子组件可以通过this.props.children来访问父组件传递的内容。
例如：
// 父组件
class ParentComponent extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
// 使用
<ParentComponent>
<ChildComponent>
<p>Hello, World!</p>
</ChildComponent>
</ParentComponent>- 使用React.cloneElement方法：React提供了React.cloneElement方法，可以克隆并传递props给子组件。通过这种方式，可以在父组件中对子组件进行包装，同时传递额外的props。
例如：
// 父组件
class ParentComponent extends React.Component {
render() {
return (
<div>
{React.cloneElement(this.props.children, { additionalProp: 'additionalValue' })}
</div>
);
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>{this.props.additionalProp}</p>
{this.props.children}
</div>
);
}
}
// 使用
<ParentComponent>
<ChildComponent>
<p>Hello, World!</p>
</ChildComponent>
</ParentComponent>- 使用React.Children.map方法：React.Children提供了一些用于处理props.children的方法，其中包括React.Children.map方法。通过这种方式，可以对props.children进行遍历和处理。
例如：
// 父组件
class ParentComponent extends React.Component {
render() {
return (
<div>
{React.Children.map(this.props.children, child => {
return React.cloneElement(child, { additionalProp: 'additionalValue' });
})}
</div>
);
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>{this.props.additionalProp}</p>
{this.props.children}
</div>
);
}
}
// 使用
<ParentComponent>
<ChildComponent>
<p>Hello, World!</p>
</ChildComponent>
</ParentComponent>以上是将React的props.children用于多个嵌套组件的几种常见方式。根据具体的业务需求和组件结构，选择合适的方式来传递和处理props.children。
相关·内容
2回答
我不明白为什么在下面的代码中没有将样式应用于{props.children} inside视图。它不会抛出任何错误，而只是将{props.children}呈现为简单的文本。
import React from 'react';
import { View } from 'react-native';
const Card = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
)
浏览 4提问于2018-11-03得票数 2
比方说路由是
<App>
<Route path='/login' component={Login}/>
</App>
在App.js内部，我有以下内容
React.Children.map(props.children, function (child) {
return React.cloneElement(child, {
foo: 'bar'
})
});
但是foo: bar不会出现在Login组件的属性中。
如果我用<Login />替换<Ro
浏览 0提问于2018-04-03得票数 0
我发现React.forwardRef似乎是从react文档中将ref传递给子功能组件的认可方式：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<F
浏览 1提问于2019-10-27得票数 88
回答已采纳
这是行之有效的：
import * as React from 'react';
export default (props: any): JSX.Element => {
return (
<h1>{props.children}</h1>
)
}
这是一个错误：
import * as React from 'react';
export default (props: any): React.StatelessComponent => {
return (
<h1>{props
浏览 0提问于2018-10-13得票数 1
回答已采纳
我想把反应子转换成字符串。在下面的示例中，我将div、h2和p作为子级传递给Exampleclass中的示例。例如，当我调用props.children时，它返回一个数组，但我需要一个字符串格式的props.children，以便可以在dangerouslySetInnerHTML中使用它。
import React, { Component } from "react";
import Example from "./example";
export default class Exampleclass extends Component {
render
浏览 3提问于2020-11-05得票数 1
回答已采纳
看来，我看到了两种通过道具委托财产的平等方式：
let App = React.createClass({
render(){
return (
<Unit someName="Push me!" />
)
}
});
class Unit extends React.Component{
render(){
return (
<button>
<span className="glyphicon gly
浏览 0提问于2016-08-19得票数 1
有人能解释一下为什么我必须把"props.children“包装在"div”中才能让react-router工作吗？
这是可行的：
export default (props) => {
return (
<div id="main-template">
{props.children}
</div>
);
}
然而，这并不是：
export default (props) => {
return (
浏览 2提问于2016-04-14得票数 0
目前，我已经创建了一些不同的表单元素。我试图以一种不同的方式创建它们，这样我就可以将它们拼凑在一起，为表单创建不同的格式。
以下是我的一些表单元素：
// Field Component
interface IField extends ILabel {}
export const Field: React.FunctionComponent<IField> = props => {
return (
<div>
<Label {...props} />
{props.children}
</div&
浏览 2提问于2020-02-15得票数 3
回答已采纳
我在做一个有多组孩子的组件。
建议的问题是索引children，就像在props.children[0]中。这在JavaScript中非常有用。
但是在TypeScript中，我得到了一个类型错误，即使代码在运行时运行良好。
function MyComponent(props: { children: React.ReactNode }) {
return <>
...
{props.children[0]}
...
{props.children[1]}
...
</>;
}
TypeScript失败，prop
浏览 10提问于2022-11-25得票数 0
回答已采纳
我查看了高级组件的react文档，偶然发现了一个示例，您可以在其中记录特定组件的道具。
function logProps(WrappedComponent) {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
浏览 0提问于2018-12-09得票数 0
回答已采纳
在切换路由路由时间，它正在工作，但现在是最新的新路由，路由它不能工作的自定义路由--我已经在HomeLayoutHOC中包装了导航栏页面和主页--任何人都可以帮助我:)如何完成我尝试过的这个最新版本，但是有很多事情要做。没有结果
我想要'HomeLayoutHOC‘路线而不是’路由‘
->client\src\App.JSX :
//HOC
import HomeLayoutHOC from "./HOC/Home.Hoc";
import { Route, Routes } from "react-router-dom";
//Comp
浏览 1提问于2022-08-26得票数 1
回答已采纳
1回答
我正在创建react中的全局通知组件，该组件使用createNotification为其子节点提供Context句柄。通知与props.children一起呈现。如果props.children没有改变，是否会阻止它们的重新呈现？
我尝试过使用React.memo和useMemo(props.children, [props.children])，但没有得逞。
const App = () => {
return (
<Notifications>
<OtherComponent/>
</Notifications/>
浏览 1提问于2019-04-11得票数 2
回答已采纳
const AppRendrer =(props)=>(<div {...props}/>)
class App extends React.Component{
render(){
return <AppRendrer>This is test</AppRendrer>
}
}
export default App;
如果我使用<div {...props}/>，上面的输出就是“这是测试”
const AppRendrer =(props)=>(<div>{props.children}</
浏览 1提问于2019-02-25得票数 2
回答已采纳
1回答
我有这样的组件结构：
我需要基于两个不同的路由加载在< OtherComponent>，相应的路由从路由器。
我使用："react-router-dom": "^5.1.2"，并看到了一些关于使用IndexRoute和props.children的帖子，但是IndexRoute无法从react路由器-dom中解决，似乎它在版本5中被删除了。
我的路由器(BrowserRouter)如下所示：
<Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}
浏览 5提问于2019-12-23得票数 1
回答已采纳
我想知道我应该如何将这段代码分成两个独立的组件。 import React from "react";
const DropdownMenu = (props) => {
const DropdownItem = (props) => {
return (
<a href="#" className="menu-item">
<span className="icon-button">{props.rightIcon}</span>
浏览 24提问于2021-04-12得票数 0
回答已采纳
有一段时间，在编写包装时，我使用的是：
import React from "react";
export default props => (
<div style={{ fontWeight: "bold" }}>{props.children}</div>
);
但就在几秒钟前，我发现了一种很酷的技术：
import React from "react";
export default props => <div style={{ fontWeight: "bold" }}
浏览 0提问于2018-03-30得票数 3
回答已采纳
我在上下文提供程序包装器函数中存储三个值。我需要更新登录和注销组件中的上下文状态，并在navbar和任何其他地方使用它们。
const AppContext = createContext();
const AppContextProvider = (props) => {
const loggedIn = Cookies.get('isLoggedIn') ? true : false;
const [ isLoggedIn, setIsLoggedIn ] = useState(isLoggedIn);
const [ userID, set
浏览 2提问于2021-05-21得票数 1
回答已采纳
2回答
反应简单高阶分量
、、、
我的目的是制作一个简单的高阶组件，其中我有一个可重用的节组件，并可能定义一些css类和<section>标记：
import React from 'react'
function SectionWrapper(props) {
return <section>{props.children}</section>
}
export default SectionWrapper
现在，在我的父组件中，我可以像下面这样包装我的子部分组件：
<SectionWrapper>
<SectionTitle />
&l
浏览 5提问于2020-10-12得票数 1
22回答
儿童道具的类型是什么？
、、、
我有一个非常简单的功能组件如下：
import * as React from 'react';
export interface AuxProps {
children: React.ReactNode
}
const aux = (props: AuxProps) => props.children;
export default aux;
另一个组成部分是：
import * as React from "react";
export interface LayoutProps {
children: React.R
浏览 0提问于2018-12-09得票数 610
1回答
我用ReactJS编写了一个简单的选项卡组件，其目的是使定义不同的选项卡变得非常简单。在我看来，我的实现做得很好，因为定义选项卡变得非常简单：
<TabbedComponent>
<Tab>
<Name>Tab 1</Name>
<Content>
<h1>This is the first tab</h1>
<p>This is the first tab content</p>
</Content>
</Tab
浏览 0提问于2015-11-23得票数 2
我正在尝试让React渲染基于屏幕尺寸的props.children。此代码可以工作，但React会重新创建props.children的新组件实例。有没有办法强制React保留相同的组件实例，这样我就不会丢失它的状态？ 我尝试了两个useMemo() memo()。我试过用钥匙道具。它们都不起作用。 <Hidden mdUp>
<Dialog open maxWidth="md" fullWidth>
<DialogTitle>{props.header}</DialogTitle>
<DialogC
浏览 17提问于2019-05-26得票数 0
3回答
我在react redux应用程序中使用和。要将这两者连接起来，我需要覆盖react表中的TbodyComponent，这样我就可以用滚动条包装默认的two组件，并传递额外的支持来调整呈现。下面是一些简化的代码：
import React from 'react'
import ReactTable from 'react-table'
import {ReactTableDefaults} from 'react-table'
import { Scrollbars } from 'react-custom-scrollbars'
浏览 0提问于2018-05-03得票数 2
回答已采纳
关于我在这里的后续问题：How to pass data from child to parent component using react hooks我有另一个问题。下面是组件结构 export const Parent: React.FC<Props> = (props) => {
const [disabled, setDisabled] = React.useState(false);
const createContent = (): JSX.Element => {
return (
<Authorization>
{&l
浏览 90提问于2020-06-11得票数 0
回答已采纳
我有一个需求，我需要显示日期范围选择器和选定的日期范围应提供给所有组件。我正在尝试使用React Context API来实现这个目标。
使用React.useContext()，我能够在所有组件中看到更新的值，但在{props.children}中呈现的值除外。
下面是我尝试过的方法。
Context.tsx
export const DateRangeContext = React.createContext<DateRangeContextType>({
dateRange: {
startDate: new Date(),
endDa
浏览 1提问于2022-08-03得票数 0
2回答
当使用Typescript在React中定义道具时，默认的React道具似乎会被任何界面所覆盖。有没有一种干净利落的方法来合并这两种方式，而不必指定React已经知道的每一个属性？
示例：
interface IProps { // extends React.???
title: string;
// Generally seen adding children?: any
// But this can get out of hand with onClick, onChange, etc
}
function MyComponent(props: IProps) {
浏览 0提问于2017-11-01得票数 2
我在我的控制台上看到了这个错误：
警告:失败的propType:向ButtonRow提供的children无效。检查BookingForm的呈现方法。
ButtonRow看起来是这样的：
import React, {Component, PropTypes} from 'react';
export function Left(props) {
return <div className="left-col">{props.children}</div>;
}
export function Right(props)
浏览 4提问于2016-06-13得票数 6
我使用的是一个react-table库，当用户单击展开图标时，我希望它使用(react-bootstrap modal)以模式打开该表。我需要的模式是通用的，每次都会得到一个不同的图形组件，甚至只是常规的内容。我想知道这是否是实现此功能的最佳实践。我知道不推荐使用React ref，而且根据react文档，对话框不是使用此策略的好地方。但我想不出其他可以让我动态传递图形组件或任何其他组件的选项。会很乐意听到其他选择。 这是我的模式组件： const SiteModal = React.forwardRef((props, ref) => {
return (
<Mod
浏览 43提问于2020-10-27得票数 1
回答已采纳
4回答
我试图尽可能推断组件的Props接口，而不是导出它们。这并不是类和功能组件的问题，但是如果我试图推断出一个Props接口的styled-component，那么这个支柱就会被输入到any中，这并不理想。
interface Props {
bgColor: string;
children: React.ReactNode;
}
const Box = styled.div<Props>`
background-color: ${(p) => p.bgColor};
`;
const Button = (props: Props) => (
<
浏览 6提问于2020-09-24得票数 8
回答已采纳
我使用BrowserRouter来管理路由。我有一个函数，当它被调用时，我想在不刷新页面的情况下更改路由。
import React from 'react';
const myPage: React.FC = (props) => {
function loadPage(event: any) {
if (event.target.id) {
window.history.push('/' + event.target.id)
}
return (
<div id='home' onCli
浏览 0提问于2019-08-30得票数 1
1回答
在我的一个React组件中，我希望在创建样式组件时使用props来确定要使用哪个标记。具体来说，我在寻找props.headingLevel中的内容，以决定要创建哪个标题级别。例如h1或h2。
所有样式化组件示例都显示组件是在function组件类或函数之外创建的，但是，当props可用时，我只能通过在函数中创建样式组件来实现此功能。我知道您可以通过在function函数中传递给样式组件本身的props来使用样式组件内部的props，但此时为时已晚。
所以我的问题是双重的。在反应组件函数中创建样式化的组件是否可以接受？还有，是否有更好的方法来管理动态标记，例如基于上下文或props传递的创建样
浏览 0提问于2018-04-25得票数 2
props.children的反应是什么？
是什么定义了这些孩子？
它们是否在组件的呈现方法中定义？我想是的。
孩子们总是被渲染吗？如果是，那么为什么在使用react路由器时，我需要手动将{this.props.children}放到呈现方法中？那又有什么意义？
这就是我的意思：
// modules/App.js
// ...
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
浏览 2提问于2016-10-17得票数 0
回答已采纳
我正在更新我的通用redux应用程序，以使用react路由器v4。我在主布局路线下有嵌套的路线。以前，我使用{props.children}来显示子路由的内容，但是这不再有效。这在V4中是如何工作的？
<Provider store={store} key="provider">
<div>
<Route component={Layout} />
<Switch>
<Route path="/" component={HomePage} />
<Rou
浏览 6提问于2017-04-03得票数 25
回答已采纳
使用React + Typescript，我想创建一个children支柱，它只接受接受理解和接受ref属性的单个子对象。基本上，我的孩子应该接受：
<div>)a类组件的一个实例--一个标准的wrapped元素(例如<button>，<button> forwardRef包装的函数组件)
它不应接受：
一个常规函数组件文本节点，如字符串或数字
我使用这个children类型的目标是在一定程度上肯定React.cloneElement不会完全忽略ref，从而向子节点注入一个ref。
我试过了
import React from "react"
浏览 8提问于2022-04-18得票数 2
回答已采纳
我试图在React.memo()中包装一个子组件("Box")，以避免在父组件从状态更改重新呈现时不必要的重呈现。但这并不适用于props.children属性。当我再次尝试不使用props.children时，它确实成功了！但是为什么呢？如果没有使用props.children，那么如何使用组合和memo属性来实现这一点呢？
(1)传递组件示例(已工作)：<Box title="i am a box" />
(2)传递组件示例(无效)：<Box> <h1>I am a box</h1> </Box>
浏览 6提问于2022-05-27得票数 1
1回答
用我的库返回错误包装MUI
、、、、
我想要构建一个包装MUI的库。我用以下代码创建了一个Button：
import React, { ReactNode } from 'react'
import Button from '@mui/material/Button';
import './Button.css'
export interface ButtonProps {
color: "inherit" | "primary" | "secondary" | "success" | "error
浏览 0提问于2021-12-20得票数 0
我的代码是
import React, {Fragment} from 'react'
import ReactTooltip from 'react-tooltip'
import PropTypes from 'prop-types'
class Tooltip extends React.Component {
childRef = React.createRef();
render() {
const props = this.props;
const child = React.Children.only(p
浏览 17提问于2020-02-11得票数 0
回答已采纳
我正在编写React实践的代码，但我停了下来，因为我必须在其他页面之间共享导航栏
我找到了下一个解决方案，它是有效的，但我不知道它到底是如何工作的；这是一个课程项目。
function Layout(props) {
return(
<React.Fragment>
<Navbar />
{props.children}
</React.Fragment>
);
}
我真的不知道{props.children}到底做了什么，以及如果布局组件开始容纳其他组件，导航栏组件是如何出现的
<Layout>
浏览 5提问于2019-07-24得票数 2
回答已采纳
给定组件作为子函数接收函数(回调作为子模式，也称为呈现支持模式)：
<Foo>{() => <Bar/>}</Foo>
React.Children.count(props.children) === 0 in Foo.
文档似乎没有提到React.Children只接受有效的function元素，因此忽略子函数的事实看起来很奇怪。
React.Children是如何对待非元素儿童的?为什么？
欢迎引用官方源和/或源代码。
浏览 0提问于2018-09-28得票数 24
我还没有在svelte 3中找到这个特性。我希望它是这样的..
App.svelte
<Error>
<p>Can't connect to the server!</p>
</Error>`
Error.svelte
<div>{props.children}</div>
我想让App.svelte显示：
<div><p>Can't connect to the server!</p></div>
我只知道如何使用React的props.childre
浏览 9提问于2019-07-17得票数 9
回答已采纳
1回答
我想创建一个div，它在div的底部显示blurr (当存在溢出时)。问题是该div包含props.children，其中还包含其他组件/ html标记。 我尝试使用ref (React.useRef)，但是ref甚至在孩子被渲染之前就已经设置好了。我尝试使用带有ref的useEffect，但是当我使用例如element.current.scrollbarHeight时，我仍然得到0。 如何检查渲染的div (带有子目录)是否溢出？(我使用的是一个功能组件) <div> {props.children} </div> 为了生成模糊，我使用了带样式的组件。
浏览 38提问于2021-01-25得票数 0
回答已采纳
1回答
我不明白这有什么意义
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
如果我能做到的话：
function FancyButton(props) {
return (
<button className="FancyButton" ref={props.ref}>
{prop
浏览 2提问于2019-06-25得票数 8
我正在尝试获取有关子组件的ref，但它似乎不起作用。同样的方法适用于React类组件，但不适用于钩子。
import React, { useState, useRef } from "react";
export default function TestContainer(props) {
const ref = useRef(null);
return (
<div className="test-container" onClick={() => console.log(ref) // this logs null
浏览 0提问于2020-08-06得票数 0
在类组件Field.jsx render()中，我使用<Flipper> (抽象的翻转动画)扩展<Position>组件，如下所示：
import { Flipper, Flipped } from 'react-flip-toolkit'
import { Position } from "./Position";
import "./css/Position.css";
class Field extends Component {
constructor(props) {
super(props);
浏览 5提问于2020-09-25得票数 2
回答已采纳
我想将一些道具插入到我从props.children中提取的React组件中，如下所示：
<PageContainer>
<PageOne />
<PageTwo />
<PageThree />
</PageContainer>
在<PageContainer>中，我通过props.children和当前页面索引提取当前页面，如下所示：
const { children, pageIndex } = props;
let activePage = React.Children.toArray(children
浏览 1提问于2020-04-17得票数 0
当试图将自定义道具从布局传递给子程序时，我收到以下消息：TypeError: props.children is not a function
布局(功能组件摘要)
import React, { useState } from 'react'
import { useStaticQuery, graphql } from 'gatsby'
export default (props) => {
const {site} = useStaticQuery(
graphql`
{
浏览 3提问于2019-10-30得票数 5
回答已采纳
我想将变量从父组件传递给props.children
如果像这样访问父变量到props.children，是否是可选的？
function App() {
return (
<div>
<Example>
<Example.Title>
<p>this is Title</p>
</Example.Title>
<Example.Body>
<p>this is Body</p>
浏览 2提问于2022-09-23得票数 0
回答已采纳
1回答
我正在尝试理解ReactJS中的渲染。我正在学习YouTube的这个教程，但我想更好地掌握这个主题。该视频解释说，如果您传递子组件
<Child/>
然后它将触发父级和子级的呈现。不过，如果你传下去
{props.children}
然后，它将只更新父级，如果子代没有更改。但如果我有一系列不同的孩子呢？如果我有20个孩子或者100个孩子呢？我想把道具传给一个特定的孩子？说我想把道具传给50岁的孩子(或其他孩子)。那我该怎么做呢？
如果我想传递这些常量，孩子们是只在收到道具的情况下才重新渲染，还是会全部重呈现？
const [childA, setChildA] = useState
浏览 5提问于2022-05-23得票数 1
我犯了这个错误。我不知道如何解决，我在互联网上没有看到合适的解决方案。我刚开始打字，所以我不知道怎么解决这个问题。最初，该项目是在js上进行的，因此它将使用ts迁移转移到ts。现在我正在纠正由于转移引起的错误。
错误码：
TS2769:没有与此调用匹配的重载。--
Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
Type '{ children: (stri
浏览 20提问于2022-09-19得票数 2
如何使用组件返回特定JSX的jest/react测试库进行测试？
我有toBeInstanceOf等，但是很难找到有关“反应测试库”的信息。
以下是几个例子。
const className = props.className;
if (!props.action) {
return props.children;
}
const { id, type, target } = props.action;
if (type === "EXTERNAL") {
return (
<a className={className
浏览 1提问于2019-11-04得票数 1
回答已采纳
2回答
在过去的两个小时里，我一直在挠头，为什么这个第三方风格的组件没有添加I it .have一个外观 import React from 'react';
import styled from 'styled-components'
const StyleDiv =styled.div`
@media(max-width:600px){
body{
background-color: red;
}
}`
const Person= (props)=>{
return <StyleDiv>
<h1 onClick={props.click}&
浏览 28提问于2020-04-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
