React -复合组件(对象作为React子对象无效)
基础概念
在React中，复合组件是指一个组件包含另一个或多个子组件的情况。通常，子组件可以作为JSX元素直接嵌套在父组件中。然而，当尝试将一个对象作为子组件传递时，React会抛出错误，提示“对象作为React子对象无效”。
为什么会出现这个问题
React期望子组件是一个有效的JSX元素或一个返回JSX元素的函数。当传递一个对象时，React无法将其渲染为DOM节点，因此会报错。
解决方法
- 确保传递的是JSX元素或返回JSX元素的函数： 确保你传递的子组件是一个有效的JSX元素或一个返回JSX元素的函数。
- 确保传递的是JSX元素或返回JSX元素的函数： 确保你传递的子组件是一个有效的JSX元素或一个返回JSX元素的函数。
- 使用React.cloneElement：
如果你需要传递一个对象并希望将其作为子组件处理，可以使用
React.cloneElement方法。 - 使用React.cloneElement：
如果你需要传递一个对象并希望将其作为子组件处理，可以使用
React.cloneElement方法。 - 检查数据结构： 确保你的数据结构中没有意外地将对象作为子组件传递。例如，在使用map函数渲染列表时，确保返回的是JSX元素。
- 检查数据结构： 确保你的数据结构中没有意外地将对象作为子组件传递。例如，在使用map函数渲染列表时，确保返回的是JSX元素。
应用场景
复合组件在React应用中非常常见，特别是在构建复杂的用户界面时。例如，一个页面可能包含多个子组件，每个子组件负责不同的功能模块。通过复合组件，可以更好地组织和管理代码，提高代码的可维护性和可重用性。
参考链接
通过以上方法，你可以解决“对象作为React子对象无效”的问题，并更好地理解和应用复合组件的概念。
相关·内容
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
1回答
我正在使用react和npm组件包创建一个chrome扩展。我试图在页面上显示一条错误消息。当我触发错误消息组件时，我得到了一个错误。
这是错误：-
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional he
浏览 2提问于2021-06-08得票数 0
父组件--
import React from "react";
import {View,SafeAreaView,Text,StyleSheet} from 'react-native';
import TestComponent from "./Components/TestComponent";
const Test = () => {
return (
<View>
<Text>Here are some boxes of different
浏览 2提问于2022-03-16得票数 0
我是新的反应(和一般的网页开发)试图建立一个简单的应用程序。我相信这是显而易见的，但一天都找不到解决办法。使用下面的代码，我得到了一个错误: Uncaught不变冲突:对象作为React子对象无效(找到:带有键{message}的对象)。如果您打算呈现一个子集合，请使用数组代替。
我也尝试了几种方法来纠正每一个其他的帖子，但从未成功(并得到不同的错误)，我觉得我错过了这里，非常简单的东西。有人能看看我的代码告诉我出了什么问题吗？
父组件(传递此组件从服务器获取的消息id的另一个组件的子组件)：
import React from 'react';
import Singleme
浏览 3提问于2019-10-29得票数 0
整个错误：
不变量冲突:对象作为React子对象无效(找到:带有键{$$typeof、type、key、ref、props、_owner、_store}的对象)。如果您打算呈现一个子集合，则使用一个数组，或者使用createF.‘包装对象。
我找不到这个错误的确切位置，它只是在react dom中产生了一个错误，那么我如何调试和发现这个错误呢？
浏览 2提问于2017-09-12得票数 1
我正在使用firebase开发一个react应用程序。当我试图从数据库中检索我的消息时，我得到了以下错误 对象作为React子级无效，如果要呈现子级集合，请改用数组。 我的代码 const [channels, setChannels] = useState([]);
useEffect(() => {
db.collection('channels').onSnapshot((snapshot) =>
setChannels(
snapshot.docs.map((doc) => ({
浏览 14提问于2021-02-08得票数 1
React能够使用JSX打印任何原始值和react元素，但是如果它在JSX中遇到任何对象，那么它会抛出一个错误，因为“对象作为react子级无效”。
请帮助我理解这一点，并了解其背后的原因。
浏览 1提问于2021-02-08得票数 2
1回答
我在试着建立一个天气应用程序。我有一个搜索栏组件，它通过api获取数据，并设置天气道具的状态(最初为null)：
getInitialState: function() {
return {text: '', weather: null};
},
handleClick: function() {
WeatherApi.get('q=' + this.state.text).then(function(data) {
this.setState({weather: data})
}.bind(this));
}
浏览 2提问于2016-07-19得票数 0
回答已采纳
使用，有几种方法可以定义children的类型，比如将其设置为JSX.Element或React.ReactChild或扩展PropsWithChildren。但这样做，是否有可能进一步限制儿童反应的特定因素呢？
function ListItem() {
return (
<li>A list item<li>
);
}
//--------------------
interface ListProps {
children: React.ReactChild | React.ReactChild[]
}
function List(pro
浏览 5提问于2021-03-03得票数 5
回答已采纳
1回答
我不是在上课，我想学习如何手动操作。我正在处理登录屏幕。如果你想给我看你的代码，你需要保存和共享链接。所以我想要一个用于显示textbox的函数组件(假设ChildComponent是函数名，所以是export ChildComponent)。
因此，在“家长/屏幕1”中，我有类似的东西，对吗？
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'exp
浏览 4提问于2021-02-14得票数 2
回答已采纳
3回答
我不能在React中打印简单的JavaScript日期。
import React, { Component } from 'react';
import './ActivityWarningText.css';
class ActivityWarningText extends Component {
render() {
const str = new Date();
return(
<div>
<h1>All activi
浏览 0提问于2018-04-25得票数 2
回答已采纳
因此，我试图将字段从MongoDB传递到React组件中，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import { Players } from './../imports/api/players';
import TitleBar from './..
浏览 0提问于2018-12-27得票数 1
App.js组件
import React from 'react';
import StartPage from "./StartPage";
import LoginPage from "./LoginPage";
import SignUp from "./SignUp";
import Route from "./Route";
const App = () => {
const onClickStart = () => {
window.location.pathn
浏览 2提问于2021-04-18得票数 1
回答已采纳
1回答
我在JSF 2.0中使用Facelets。在facelets标记库中有一个名为<ui:component>的标记。它将一个UIComponent实例插入到树中，并修剪自身外部的标签。
有人能给我解释一下这种功能的用途吗？为什么有人想要将UIComponent实例添加到树中？
我搜索了很多关于组件标签的例子，但是没有找到。
浏览 1提问于2012-12-26得票数 0
当我将我的详细数据传递给模式显示时，我会得到这个错误。实际上，这个功能是当用户点击帖子时，一个模式出现在显示细节的模态上。我正在使用进行国家管理。这是我的密码
错误对象作为React子对象无效(找到:带有键{nid、标题、内容、noticeType、creationDate、updatedDate}的对象)。如果您打算呈现一个子集合，请使用数组代替。
noticeModal.jsx
const ModalDialog = ({open ,onClose, data}) => {
return (
<Dialog style={{widt
浏览 2提问于2020-04-28得票数 1
我想从一个组件到另一个组件访问状态。为此，我只想将contextprovider包装到单击按钮时状态发生变化的组件，并从usehook返回状态，以便另一个组件可以访问该状态。
下面是组件在未应用上下文的情况下的外观，
function Parent () {
return (
<UploadButton/>
);
}
function UploadButton () { //this is where state is set
const [isDialogOpen, setIsDialogOpen] = React.useState(fa
浏览 0提问于2020-07-17得票数 1
我正在尝试添加这个简单的todo项目字符串在数组中工作，但当我在地图中使用它并渲染它时，我需要使用item.item才能工作，如果我只使用项目，我收到对象无效的错误，因为React Child...Btw这是redux.how，我能解决这个问题吗？ 这是显示的列表 const todos=useSelector(state=>state)
<table>
<tbody>
<tr>
<th>note</th>
<th>remove<
浏览 15提问于2020-08-06得票数 0
1回答
我见过一些库在React中使用点符号组件
例如：
<Menu>
<Menu.Item>Item 1</Menu.Item>
<Menu.Item>Item 2</Menu.Item>
</Menu>
这是在类组件中使用静态关键字。
const Item = () => ...code
class Menu extends Component {
static Item = Item
...code
由于带有React的功能组件不是类组件，这种模式是否仍然可以与功能组件一起使用(例如访问原型或其
浏览 5提问于2020-05-14得票数 3
回答已采纳
我有一个自定义的UIComponent，当直接从基本的facelet模板调用时，它呈现ok (我猜这使它成为UIComponentBodyTag的直接子级)。但是，当在复合组件中调用它时，什么也不会发生。我没有得到任何例外，什么也没有。其他一切都呈现正常。
因此，当这个方法起作用时：
<h:body>
<x:myUiComponent />
</h:body>
这不起作用：
<h:body>
<demo:uiComponentWrapper />
</h:body>
uiComponentWrapper.x
浏览 0提问于2010-11-24得票数 0
回答已采纳
我很新的反应，并反应本机，但我想把一个const变量从一个函数，到另一个文件。我尝试在我的函数之外定义它，然后让它在我的函数中被修改，但是我得到一个无效的Hook调用错误。这是我的密码：
import React, { useState } from "react";
import {
SafeAreaView,
StyleSheet,
TextInput,
TouchableOpacity,
Text,
} from "react-native";
function JoinScreen({ navigation }) {
const
浏览 3提问于2021-05-03得票数 0
回答已采纳
问题是：
如何获得引用(作为ReactElement而不是DOM)，在一个节点中，带有螺旋桨引用.
示例，在下面
将类MyTable呈现为：
<table ref="myTable">
{this.state.list.map(name=>
<AddVarTableRow key={name} myName={name}/>
)}
</table>
在componentDidUpdate，想要这样做：
React.Children.forEach(this.refs.tbody.props.ch
浏览 0提问于2016-03-11得票数 0
我正在设置一个带有Rails后端的React应用程序。我得到的错误是“对象作为React子级无效(发现:具有键{id，name，info，created_at，updated_at}的对象)。如果您打算呈现一个子级集合，请使用数组。” 下面是我的数据： 我的代码如下： 我做错了什么？
浏览 192提问于2018-09-20得票数 153
回答已采纳
1回答
我所处的情况是，我需要从StackNavigator的子级导航。这通常是如何实现的？this.props.navigation.navigate是否必须作为道具传递下来，或者有其他方法可以做到这一点。类似于React Router的withRouter HOC？
浏览 9提问于2017-08-02得票数 1
回答已采纳
请告诉我为什么我会从这个应用程序中得到这个错误：
index.js：
const API='http://my-domain.com/api/?format=json'
class App extends React.Component{
constructor(props){
super(props);
this.state={
data: [],
isLoading: false,
error: null,
};
}
componentDidMount(){
this.setState({isLoading: true});
浏览 90提问于2018-07-18得票数 0
回答已采纳
我正在尝试设置darkMode按钮，但是我得到了这个错误.未明错误:对象作为React子对象无效(找到:带有键{背景、颜色}的对象)。如果您打算呈现一个子集合，请使用数组代替。
这是我的数据.
我的组件.
import { createContext, useReducer } from "react";
export const themeContext = createContext();
const initialState = {darkMode : true};
const themeReducer = (state, action) =>{
浏览 4提问于2022-05-11得票数 0
当用户单击MUI Datagrid中的按钮时，我试图将数据传递到另一个页面。我使用的是中的useHistory，但我面临的问题是如何实现useHistory。
如何让useHistory在我的函数handleEdit中工作，因为错误显示为"handleEdit，它既不是function函数组件，也不是自定义useHistory函数“。
表组件
import React from "react";
import { useHistory } from "react-router-dom";
import { DataGrid} from "@mui
浏览 13提问于2022-12-02得票数 0
尝试在这里优化我的React应用程序的内存使用。想要了解当我将一个大对象作为道具传递给子组件时会发生什么，我是否会使应用程序的内存使用量加倍？归根结底，什么是组件可能消耗的内存。
浏览 22提问于2019-12-29得票数 1
如果我将一个jsx组件(A)作为属性传递给另一个组件(B)，如下所示：
import A from "A.jsx";
import B from "B.jsx";
...
class MyClass extends React{
...
render(){
return <B customContent={A} />
};
}
当组件B在React生命周期中更新时，A也会更新吗？
浏览 0提问于2019-04-09得票数 0
2回答
我尝试将上传的文件传递给父组件和子组件都基于函数的子组件。
我使用的是React，TypeScript和Material。
父母
import React from 'react';
import Child from './Child';
const Parent:React.FC =() => {
const [file, setFile] = React.useState(null);
const onChangeFile = (e:any) => {
setFile(e!.target.files[0]);
}
re
浏览 4提问于2019-12-11得票数 1
回答已采纳
您能告诉我，如何将state值从子组件child复制到Parent parent吗？子组件实现按钮上状态的递增和递减。该值也应显示在Parent中。谢谢! import React, {useState} from 'react';
import Child from "./Child";
const Parent = () => {
const [value, setValue] = useState(0);
return (
<>
<span>{value}</s
浏览 29提问于2021-08-21得票数 0
我遵循本教程，和Im遇到了一些问题。
我每次都使用世博客户端应用程序渲染我的应用，而不是仿真器/仿真器。
下面可以看到我的代码。
我最初在"SimpleApp“组件上定义了"ChatScreen”const，但这给了我以下错误：
路由‘聊天’应该声明一个屏幕。例如：...etc
所以我把SimpleApp的解密移到了"AppRegistry“上面，这标志着一个新的错误。
元素类型无效:预期的string.....You可能忘记导出component..etc
本教程没有将关键字“导出默认”添加到任何组件中，我认为这可能与我在世博会应用程序上运行它有关？因
浏览 7提问于2017-06-21得票数 28
回答已采纳
我是一个相对较新的反应，尽管我在教程视频上看到了这个例子，但我不能让它工作：
import React from 'react';
import Form from 'muicss/lib/react/form';
import Input from 'muicss/lib/react/input';
import Textarea from 'muicss/lib/react/textarea';
import Button from 'muicss/lib/react/button';
export defa
浏览 7提问于2016-08-19得票数 0
1回答
我不知道这段代码有什么问题。我正在尝试为reactDND DragSource HOC编写一个简单的包装组件。我们的目标是能够这样写：
const CanDrag = () => (
<Draggable type='FOO' source={{id: 1}} collector = {() => ({})} >
<div>whatever</div>
</Draggable>
);
而不是不得不写
DragSource(type, source, collector)(CanDrag);
对于我的特
浏览 1提问于2018-08-23得票数 0
2回答
handleShowMatchFacts = id => {
// console.log('match', id)
return fetch(`http://api.football-api.com/2.0/matches/${id}?Authorization=565ec012251f932ea4000001fa542ae9d994470e73fdb314a8a56d76`)
.then(res => {
// console.log('match facts', matchFacts)
th
浏览 4提问于2017-05-02得票数 0
回答已采纳
3回答
我正在构建一个React应用程序，我需要为我从应用程序打开的所有窗口存储处理程序(是的，这有点奇怪，但这是我必须要做的)。在使用React之前，我将窗口存储在一个指向父窗口的全局数组上(我知道JS全局变量是一种非常糟糕的做法，但它是在项目中指定的)。
我不想使用Redux，只想用React.来解决这个问题。
在新的React应用程序中，我在app组件的状态上声明了这个数组，并使用了一种方法来操作stae，作为子组件的支柱：
class App extends Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2018-06-06得票数 1
伙计们！我正在使用ReactJS创建一个小型网站。由于我添加了以下代码，它开始显示一个错误：对象作为React子对象无效。如果您打算呈现一个子集合，请使用数组代替.。
代码：
import { useState, useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';
import './css/App.min.css';
import config from './config';
function App() {
re
浏览 2提问于2021-07-20得票数 0
回答已采纳
在React中，您可以找到下一个突破性的更改：
Plain objects are no longer supported as React children; arrays should be used instead. You can use the createFragment helper to migrate, which now returns an array.
，谁能解释他们所谓的普通对象是什么意思？
创建组件的方法有两种: ES6 extends React.Component & React.createClass。其中哪一个是朴素的？
浏览 4提问于2015-10-12得票数 3
回答已采纳
我倾向于使用react功能组件和钩子，因为我没有太多使用react的经验。我想在父功能组件中使用react-dual-listbox类组件。在这个父组件中，我希望能够访问子类组件的selected状态。做这件事最好的方法是什么？
来自的子项react-dual-listbox组件
import React from 'react';
import DualListBox from 'react-dual-listbox';
const options = [
{ value: 1, label: 'Option One' },
浏览 2提问于2021-07-22得票数 1
It射击id:doc.id和post中的错误: doc.data()
错误:对象作为React子对象无效(找到:键{username}的对象)。如果您打算呈现一个子集合，请使用数组代替。
const [post, setPost] = useState([]);
useEffect(() => {
db.collection("posts").onSnapshot(snapshot => {
setPost(
snapshot.docs.map(doc => ({
浏览 2提问于2020-11-20得票数 3
我得到了以下错误：
错误:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查Grid的呈现方法。
我的反应代码：
import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-d
浏览 1提问于2020-07-23得票数 0
回答已采纳
1回答
我有一个头组件，它呈现一些链接，这取决于用户是否登录。
此组件加载良好，显示签名和注册链接良好。点击这些链接，我就会看到这些组件，它们的功能就像它们应该的那样。一旦我登录，标题更改为显示一个登录链接。
然而，当我退出的时候，事情就出了岔子。签名和注册链接显示良好，但他们不再是功能。单击“注册”链接会出现以下错误：
未明错误:对象作为React子对象无效(找到:键{}的对象)。如果您打算呈现一个子集合，则使用数组代替，或者使用createFragment( object )从React插件包装对象。检查Signin的呈现方法。
再次单击该链接会产生以下结果：
bundle.js:429
浏览 1提问于2017-10-25得票数 0
回答已采纳
如何在其子组件的条件下渲染父组件？如果任何孩子是无效的，我想禁用父母中的按钮。但是验证是在子组件内部进行的。
class Parent extends React.Component {
constructor(props){
super(props);
this.state = {data: [
{type: "text", value: ""},
{type: "email", value: "not valid email"}
]};
isAnyChildInvali
浏览 13提问于2020-05-25得票数 0
1回答
我们正在开发一个基于mojarra2.2.8的大而复杂视图的企业应用程序。我们最大的视图生成>20.000节点的JSF组件树。当然，我们遇到了性能问题，因此我们开始减少树的大小，方法是用<ui:repeat>替换<c:forEach>，用<c:if>块替换rendered属性，就像这个中推荐的那样。这些措施大大减少了组件树，并带来了显着的性能改进。
但是，有一种方法没有奏效:我们的视图包含一个选项卡组中的几个选项卡。当我们试图通过<c:if>标记删除不可见选项卡的内容时，这些选项卡的组件树仍然存在，性能没有任何好处。
我们发现，<c:
浏览 2提问于2017-07-21得票数 3
回答已采纳
2回答
我想知道我是否可以在react中做到这一点，我想从JS文件中调用react组件的函数或方法，这样我就可以更改该组件的状态。
例如，我有以下三个文件
第一个App.js
import React,{Component} from 'react';
import Login from './Login';
class App extends Component{
constructor(){
super();
this.state = {session:false}
}
changeStateSession
浏览 3提问于2018-03-07得票数 1
2回答
我已经在父组件中建立了websocket连接，并使用socket将其存储在变量useRef中。现在，我将这个socket传递给道具中的一个子组件。我希望在子组件中使用这个套接字来发出特定于组件的事件，并根据某些websocket事件更新特定于组件的某些状态变量。
父组件
function Parent(props) {
const userId = props.userId;
const socket = useRef(null);
useEffect(() => {
if (userId) {
socket.current = services.est
浏览 5提问于2021-02-25得票数 0
这些代码是如何工作的？如何在组件内部调用函数？
import React from 'react'
const ThemeContext = React.createContext('blue');
const App = () =>
<ThemeContext.Provider value={'green'}>
<ThemeContext.Consumer>
{(value) => <button style={{ background: va
浏览 1提问于2020-03-11得票数 3
回答已采纳
3回答
复合图案
、、
我有个关于复合图案的问题。
基类"Component“是否像指向”复合“类中的叶对象的指针？
编辑：，让我用下面的话来问我的问题。“复合类和组件类之间的关系是什么？”
下面是该模式的uml类图。
浏览 2提问于2010-03-12得票数 0
回答已采纳
1回答
嗨，我正在尝试将输入值从AddHamster (子)组件传递给HamsterCard组件(父组件)。我得到了错误消息: Error: Objects作为React子对象无效(找到:带有键{name、age、render}的对象)。如果您打算呈现一个子集合，请使用数组代替。
知道我怎么解决这个问题吗？
import React, {useState} from "react";
const AddHamster = () => {
const [name, setName] = useState( '')
const [age, se
浏览 4提问于2022-02-07得票数 0
1回答
我想在机器数组中添加宏，所以我定义了一个包含add函数的特定组件。因此，当我在"process“数组中添加”process“时，它将使用useEffect在控制台上进行反射。但是当我添加一台机器时，它会反映在MachineGround组件中，而不是应用程序组件中。总的来说，我计划添加一个仪表板，如果在机器数组中添加一个mcahine，它应该反映在中的进程中，并且仪表板应该被更新。
我会感谢你的帮助。
App组件
import React, { useEffect, useState } from 'react';
import { Container, Typograp
浏览 7提问于2022-04-04得票数 0
回答已采纳
2回答
我试图呈现一个按级别分组的数据数组。通常情况下，数据看起来如下：
let education: [
{ id: 1, level: "phD", institution: "University A", country: "USA" },
{ id: 2, level: "MSc", institution: "University B", country: "Switzerland" },
{ id: 3, level: "MSc",
浏览 1提问于2020-10-29得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
