Lynda.com React.js对象作为React子项无效
Lynda.com是一个在线学习平台，提供各种IT和编程相关的课程。React.js是一个流行的JavaScript库，用于构建用户界面。在React中，组件是构建用户界面的基本单元，可以将组件嵌套在其他组件中形成一个组件树。
在React中，可以将一个React组件作为另一个组件的子项。这种组件嵌套的方式可以帮助我们构建复杂的用户界面，并且使得代码更加模块化和可重用。
然而，当我们将一个React组件作为另一个组件的子项时，需要注意一些限制和规则。其中一个常见的错误是将React.js对象作为React子项，但这是无效的。React子项必须是一个React组件的实例或者是一个有效的React元素。
要解决这个问题，我们需要确保将React组件作为子项传递给另一个组件时，传递的是组件的实例或者是有效的React元素。可以通过以下几种方式来实现：
- 确保传递的子项是一个React组件的实例，而不是一个React.js对象。可以使用React.createElement()函数来创建一个React元素，并将其作为子项传递给另一个组件。
- 确保传递的子项是一个有效的React元素。React元素是一个普通的JavaScript对象，具有特定的属性，例如type和props。可以使用JSX语法或者React.createElement()函数来创建一个有效的React元素，并将其作为子项传递给另一个组件。
总结起来，当我们在React中将一个组件作为子项传递给另一个组件时，需要确保传递的是组件的实例或者是有效的React元素，而不是React.js对象。这样才能保证React组件的正确渲染和功能。
关于React.js的更多信息和学习资源，可以参考腾讯云的React.js产品介绍页面：React.js产品介绍
相关·内容
React能够使用JSX打印任何原始值和react元素，但是如果它在JSX中遇到任何对象，那么它会抛出一个错误，因为“对象作为react子级无效”。
请帮助我理解这一点，并了解其背后的原因。
浏览 1提问于2021-02-08得票数 2
大家好，谢谢你抽出时间。
我看到了一个关于lynda.com React.js的教程。但是，它使用了一种旧版本的React。他的代码：
render: function(){
return (
<div>
<Header title={this.state.title} status={this.state.status}/>
<RouteHandler {...this.state} />
</div>
)
}
但是我使用了一个新版本的Reactive15.2.1和React路由
浏览 2提问于2016-07-15得票数 1
回答已采纳
1回答
我正在尝试使用axios更新React组件中的状态，以将新状态传递给另一个组件。下面是我的代码：
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
list: [],
data: []
}
this.dataById = this.dataById.bind(this);
}
dataById(e) {
this.setState({ idToGet: e.t
浏览 2提问于2018-12-04得票数 0
刚开始学习React.js，并且一直在使用Lynda.com来掌握事情的诀窍。尽管在中提到的视频系列已经过时了，但在其他Stack帖子和谷歌的帮助下，我已经能够拼凑出这个项目。但是这个错误把我难倒了。
我正在尝试向公告栏应用程序添加新笔记。当我点击add按钮(在屏幕的右上角)时，它会抛出React Minified #31错误，说明我正在使用的对象作为React子对象无效。我认为这与我刚刚创建的按钮有关，但我不知道如何解决这个问题。
我使用的是React版本15.3.1和Babel版本5.8.29 (本教程中使用的版本)。
Note.js
var Note = React.createCla
浏览 11提问于2016-08-26得票数 1
回答已采纳
太好了！ 我需要一个如何计算两个日期之间的差异在React.js中使用钩子的useState的例子。我尝试这样做，但我收到一个错误:对象作为React子级无效。 const [dateBegin, setDateBegin] = useState(new Date())
const [dateEnd, setDateEnd] = useState(new Date()) 谢谢!
浏览 17提问于2020-04-08得票数 0
下面是我的应用程序在ReactJS组件中呈现的行，并保存为nav.jsx。
<span style="font-family: 'Open Sans', sans-serif;"> Home</span>
例外：
Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}}
浏览 1提问于2017-03-17得票数 0
回答已采纳
4回答
反应式JS中组件间的切换
、、、、
我想要创建一个简单的流，有两个组件。第一个组件被呈现，我单击它上的一个按钮，这个操作呈现第二个组件。单击第二个组件中的按钮，它应该切换回第一个组件，但是出现了一个错误：
警告: React.createElement: type不应为空、未定义、布尔或数字。它应该是一个字符串(用于DOM元素)或一个ReactClass (用于组合组件)。检查exports.warning的呈现方法react.js:9853t.exports.React.createClass.render react.js:9853t.exports.React.createClass.render bundle.js:1
浏览 7提问于2015-12-03得票数 11
我有一个使用React.js，HTML和Java脚本开发的web应用程序。这个react.js web应用程序调用后端REST。
我在AWS S3上托管了这个web应用程序。
我可以使用HTTP访问web应用程序。
为了支持基于HTTPs的访问，我计划使用AWS云前端。
我没有太多的静态媒体内容，但很少的css，js和很少的小图片。
据我所知，云前线的定价是基于
数据传输量
不是的。HTTP/HTTPS请求
失效请求
在我的例子中，当用户请求网页或想搜索记录时，web应用程序会对后端进行HTTPs调用。
我想知道对后端的每一个请求是否都被视为"Invalidatio
浏览 0提问于2019-04-22得票数 0
回答已采纳
编辑:由于这似乎是一个bug，我在Github 上打开了一个问题
在下面的示例中，流似乎假设label是mixed类型，尽管道具声明和匿名函数声明都将其绑定到Node。我遗漏了什么？
/* @flow */
import React from 'react';
import type { Node } from 'react';
type Props = {
values: { [string]: Node },
/* … */
};
export default class SelectButtons extends React.Component
浏览 4提问于2017-09-29得票数 1
回答已采纳
我正在使用React.js进行一个项目，并且对React的组成非常困惑。
上面的链接给出了一个例子。它使用React.creatClass()创建三个组件。父组件和两个子组件。父组件在呈现方法中包含它的JSX中的其他组件。
这个例子非常清楚，但并不是很“可重用”。如果我想在另一种情况下收养另一个孩子呢？React.js似乎缺乏像主干视图那样的‘扩展’方法。
稍后，我发现您可以在React.render()中传递子组件，并使用this.props.children进行组合。
var Tom = React.createClass({
render: function(){
浏览 0提问于2015-04-23得票数 2
回答已采纳
这是react.js中的示例：
Form.jsx
<FormInput
type='text'
name='displayName'
value={displayName}
onChange={this.handleChange}
required
/>
Input.jsx
const FormInput = ({ handleChange, ...otherProps }) => (
<input className="form-input" onChange={handleChange} {...ot
浏览 3提问于2020-09-30得票数 0
回答已采纳
1回答
如何解析某些数据？
、、、
我试图对从React.js环境中的API查询中获得的数组值进行一些操作。然而，这些数组值是存储为"strings"的数字，例如"1.02011"。我现在试图取这个值的逆值，因为我希望用它做一些额外的棘手的事情。
所以，我有：var usdgbp = parseFloat({this.state.quotes ? this.state.quotes.USDGBP : null});
{this.state.quotes ? this.state.quotes.USDGBP : null}在code...so的其他地方工作得很好，我在想，从这种性质/类型的字符串中以
浏览 9提问于2016-11-19得票数 1
回答已采纳
1回答
我是react.js的新手。我对react.js中的onChange事件有一点困惑。为什么我们在通过onChange事件处理事件时不使用括号？
<input
type="text"
onChange={this.handleChange()}
/>
通常，当我们通过JavaScript处理事件时，我们会这样写
<input type="text" onclick="handleChange()"/>
浏览 1提问于2021-10-09得票数 0
在React.js中编写函数组件的标准方法是使用return ( ... )语句。React需要返回一个功能组件才能成为一个节点，因此通常会编写片段来包装所有内容，比如return (<> ... </>)。
除了美学，人们默认不写return <> ... </>还有什么原因吗？它似乎是一种直观的组件结构，可以消除单个节点的错误。我从未见过一个组件是这样编写的。
示例：
const MyComponent = () => {
// Logic
return <>
<h1>Hello worl
浏览 6提问于2022-08-15得票数 0
1回答
我在VS 2019中用asp.net模板创建了react.js核心。
似乎使用AuthRouter组合在react.js中授权页面
据我所知，react.js实际上运行在客户端( web服务器不部署构建的react.js文件吗？)
这有风险吗？
asp.net核心不需要服务器端的身份验证来部署react.js文件吗？
浏览 1提问于2021-02-26得票数 1
回答已采纳
我想学习React.js，但大多数教程都展示了如何将ASP.NET Core与React.js集成在一起，而我没有找到使用React.js与ASP.NET Core的任何教程。有什么建议吗？我是否可以假设React.js只适用于ASP.NET Core，其中React.js用于使用从React.js返回的JSON？
浏览 0提问于2021-06-15得票数 0
1回答
我使用的是节点提取和react.js。正如文档中提到的，我可以以这种方式缓存图像缓冲区。
var fileType = require('file-type');
fetch('https://assets-cdn.github.com/images/modules/logos_page/Octocat.png')
.then(function(res) {
return res.buffer();
}).then(function(buffer) {
fileType(buffer);
});
但是，由于我的react.js运行在localho
浏览 0提问于2016-09-20得票数 0
我在React.js中使用React.js，我希望websocket只在呈现特定组件时才启动，所以我使用websocket作为该组件的状态，如下所示：
const Comp = () => {
const [ws] = useState(socketIO());
// ... the rest of the component ...
};
但是当Comp重新呈现时，它会创建新的websocket连接，甚至我也不会对连接进行任何更改。过了一段时间，我得到了10个以上的websocket连接。如何使组件仅保持1连接？我不希望websocket连接成为全球连接。
浏览 6提问于2020-04-25得票数 1
回答已采纳
我正在使用react开发一个简单的订单列表web应用程序，我有一个orders状态，当用户单击购物面板中的产品图像时，一个新的对象添加到orders数组中，并具有quantity属性
export const AddOrder = () => {
const [order, insertOrder] = useState([])
let orderHandler = (e, product) => {
e.preventDefault()
console.log('orderHandler')
let newOrder = {
浏览 6提问于2021-06-11得票数 0
回答已采纳
5回答
我是react.js的初学者，它很神奇，但我面临着一个真正的问题:我需要使用普通的纯javascript设置输入的值，但由于某种原因react.js不能像预期的那样工作。举个例子:打开这个URL
您将看到有一个id为"CntctFrm2emailField“的"Email”输入字段。我试着用javascript用下面的代码改变它的值：
document.getElementById("CntctFrm2emailField").value = "testing@gmail.com";
但是由于某些原因，React.js没有在其核心原因上更新此值
浏览 65提问于2015-06-06得票数 24
我们正在决定如何在react.js中进行本地化，当然有办法进行本地化，但是您的建议是什么呢？
我试过雅虎的反应
var ReactIntl = require('react-intl') // we did npm install react-intl
// somewhere in the react component
render: function() {
return (<div><ReactIntl.Number>{600}</ReactIntl.Number></div>);
}
提供错误:无法读取未定义的属
浏览 8提问于2014-12-30得票数 6
回答已采纳
1回答
我试图获取React中的嵌套值，但我得到了一个错误。
我已经将React组件分成了要循环的几个部分，但我认为问题是试图循环对象和数组。
const TableRow = value => (
<tr>
<td>${value}</td>
</tr>
);
const TableBody = ({ day }) => (
<tbody>
<tr>
<td>{day}</td>
</tr>
{ /* Repeats for
浏览 0提问于2017-06-19得票数 0
这个错误意味着什么？怎么解决这个问题？
ReactMount: Root element has been removed from its original container. New container
在这之后我得到了这个：
Uncaught object react.js:15915
invariant react.js:15915
ReactMount.findComponentRoot react.js:10584
ReactMount.findReactNodeByID react.js:10480
getNode react.js:10089
(anonymous funct
浏览 3提问于2014-07-16得票数 5
回答已采纳
我有个问题：
_registerComponent(…)目标容器不是DOM元素。
这是代码：
homeMaster.Html代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="..\Content
浏览 6提问于2016-12-21得票数 2
1回答
由“react”导出的函数
、、、、
import React, { PropTypes } from 'react'
我怎样才能看到'react‘导出的所有函数？
我查看了node_modules/dist/react.js内部的文件react.js，但找不到任何类似module.exports = PropTypes ;的语句...
浏览 0提问于2017-12-13得票数 0
我正在尝试使用React.js创建我的第一个web应用程序。
我希望React执行客户端呈现，但是呈现的页面由服务器承载的数据库中的数据控制。
我应该如何传递这些数据以作出反应？
我是否必须使用我的数据的json表示形式预先填充服务器端的每个html页面？
或者可以直接从客户端访问我的数据库(或者使用RESTful API调用)？
更新: 001
我可以找到的所有示例都在node.js上安装了node.js。我可以在Apache™、、Jetty上使用REACT.js吗？
浏览 6提问于2015-05-03得票数 3
回答已采纳
我想转换网站从私营部门司原型到超文本标记语言/CSS/Bootstrap，然后转移到JavaScript开发和使用React.js和一些JavaScript编码。
有没有可能在不使用React-Bootstrap的情况下对React.js使用纯引导？
另外，有没有可能只将React-Bootstrap作为样机，然后找一个JavaScript开发人员来做像React.js和JS开发这样的高级工作？
我想开发桌面应用程序使用电子和混合应用程序使用相同的代码基尽可能。
浏览 1提问于2016-06-24得票数 6
1回答
我需要在React.js中使用Azure AD进行身份验证。这可以使用NPM包来完成，但是react.js应用程序调用API来获取/更新数据。我希望允许API只在用户通过身份验证时返回数据，这意味着如果有人拥有API的直接URI，它不应该返回数据，而是显示身份验证错误。由于react.js只在前端工作，如何使用身份验证来调用API？
浏览 14提问于2020-07-16得票数 1
回答已采纳
我是新手，目前在一个使用React.js的项目中，它需要对后端服务器进行React.js调用。
我想知道在react.js项目中声明全局变量的最好方法是什么？
非常感谢您的指导！谢谢。
浏览 4提问于2017-09-14得票数 2
我想将我的数据保存到React.js应用程序中的防火墙中，但是firestore会返回无效的文档引用。文档引用必须有偶数段，但是
Firebase Config文件
import { initializeApp,} from "firebase/app";
import {getAuth} from 'firebase/auth'
import {getFirestore} from "firebase/firestore"
const firebaseConfig = {
apiKey: process.env.REACT_APP_F
浏览 11提问于2022-08-09得票数 0
1回答
我正在尝试学习使用browserify来管理我的javascript。我的第一个简单任务是创建一个react.js文件，该文件将通过gulp + browserify生成
var browserify = require('gulp-browserify');
gulp.task('browserify-react', function () {
return gulp.src('js/react/react.js')
.pipe(browserify())
.pipe(rename('react-generated.js&
浏览 0提问于2015-11-20得票数 2
2回答
PHP并在服务器端呈现时作出反应
、、、、
我仍然是一个新的程序员，但我有一个项目的想法。我现在想的是建筑。因此，我的问题是“在PHP后端的服务器端呈现中使用哪种最佳方式”。我对此进行了研究，并找到了两项决定。
====================================================
首先是将React.js SSR与Node.js服务结合使用。
优势：
易于安装和更新
运行react.js的标准环境
缺点：
维护单独的服务器
====================================================
二是将React.js SSR与PHP`s‘s
浏览 2提问于2019-07-04得票数 2
我有像http://localhost:3000/register这样的网址。如何在register中获取return()中的React.js段
浏览 5提问于2019-12-05得票数 2
回答已采纳
1回答
我试图在React.js中使用内联样式，但我经常遇到错误：
在我的渲染功能中，我有：
render: function() {
var style = this.state.submitted ? {{"backgroundColor": "#1abc9c", "opacity": "0.6"}} : {{}};
return (
<div>
<h1 className="home-two-question" style={style}>{te
浏览 3提问于2015-07-01得票数 1
回答已采纳
2回答
我试图在React.js上使用React.js。
因此，在我的类中，我有一个函数来动态地分配状态。这是我的密码：
onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.name === "username") {
this.setState({
[e.target.name]: e.target.value
});
} else if (e.target.name
浏览 4提问于2020-07-24得票数 0
回答已采纳
我是react.js的新手。我正在尝试安装react.js。在这方面，我运行npm install -g create-react-app和create-react-app my-app。然后我尝试运行npm install命令。但是我的误差越来越小了。
浏览 0提问于2018-04-14得票数 1
2回答
我正在编写一个简单的CRUD示例，使用react.JS作为我的前端，我遇到了一个问题，这可能是因为我缺乏使用react.JS或JavaScript的经验。
这是我从API中获得的JSON：
[{"idnaselje":1,"naziv":"Zagreb","postanskiBroj":10000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":
浏览 1提问于2018-10-11得票数 2
回答已采纳
1回答
如何导出react.js的状态变量？这意味着我们在react.js中有一个状态变量，并且这个状态变量需要在另一个组件中，然后我们如何导出该组件。
浏览 4提问于2022-01-26得票数 -2
我想使用react js创建下一个流。我有一个产品列表，当我单击该列表时，我想要重定向到单个产品表单。如果我按下此表单上的delete按钮，该产品将从数据库中删除，并显示列表。我有<List />组件和<Product />组件。我也在使用Browserify。
在<List />的render函数中，我有
if (this.state.productId) {
return <Product productId={this.state.productId}/>
} else {
return (
<Table
浏览 0提问于2015-12-01得票数 0
React.js是为处理超文本标记语言而设计的。那么XUL，一种HTML呢？当我尝试同时运行它们时，我得到了一个错误：Target container is not a DOM element.
基本上，我不明白为什么React.js不能与XUL一起工作。我想听到一些关于这个问题的意见或建议。
浏览 0提问于2015-06-11得票数 1
我最近一直在读Facebook的react.js库，但我看不出React和jQueryUI窗口小部件工厂有什么不同。有没有人可以比较一下这两者，告诉我为什么我应该使用react.js而不是jQuery窗口小部件工厂？
谢谢
浏览 3提问于2015-02-09得票数 5
CMS将一个变量作为data-rest-url属性传递给React.js应用程序：
<div id="reactjs-root" data-rest-url="http://my-ip-addess:8080/Rest-api-here">...</div>
如果我将jQuery添加到我的React.js应用程序中，那么我可以简单地：
componentWillMount() {
const $reactRoot = $('#reactjs-root');
const restUrl = $reactRo
浏览 24提问于2017-03-14得票数 10
回答已采纳
4回答
我有一个相对简单的React组件，根据它的状态呈现一个列表。然后我有一个业力/茉莉测试，它呈现组件，设置其状态，并检查是否呈现了正确的标记。
我遇到的问题是，每次在组件上执行setState({})或forceUpdate()时，我都会得到一个错误：
TypeError: 'undefined' is not an object (evaluating 'deepestAncestor.firstChild')
at /home/company/projects/user_interface_kit/bower_components/react/
浏览 2提问于2014-03-17得票数 12
回答已采纳
2回答
React架构
、、
这更多的是一个考虑到react.js的架构师问题。
我应该把下面的业务逻辑放在哪里？
一旦用户通过身份验证，我们就可以访问他们的用户实体。我想检查user对象上的一个值，如果为空，填充它将是我只能在客户端获得的数据，然后修补该对象。获取、修补对象的所有代码都在alt.js存储中。但这是业务逻辑，感觉它是商店的一部分并不正确。
我考虑过一个react组件，它被设置为根react路由上的一个组件。但是它看起来不像是正确的位置，因为它没有渲染任何东西。
浏览 12提问于2016-07-21得票数 1
1回答
不能使用npm模块和React。
、、、、
我对npm很陌生，我会做出反应。我有一个使用React的应用程序，我想使用包括一些图表。
在我的app.jsx文件中，我尝试创建一个条形图：
var BarChart = require("react-chartjs").Bar;
var chartData = {
...
};
var CategorySummaryGraph = React.createClass({
render: function() {
return (
<BarChart data={chartData} width="600" heigh
浏览 1提问于2015-06-20得票数 0
回答已采纳
我最近才开始研究javascript和React.js。目前，我的main.html文件中有几个脚本标记，我需要能够访问React.js组件中这些标记中的一些变量。有这样的事吗？
浏览 2提问于2016-07-01得票数 5
1回答
我正在使用React.js从Firebase查询文档中的字段。然而，当我尝试获取数据时，我总是得到一个错误。代码、Firestore上的集合和错误消息如下。如何在不遇到此错误的情况下正确查询数据的特定字段？
import React from 'react';
import styled from 'styled-components';
import { firestore } from '../../firebase/firebase.utils';
class Economics extends React.Component {
c
浏览 0提问于2020-06-24得票数 0
我是React.js新手，我一直在试图找出下面代码块A和代码块B之间的真正区别。为什么代码块B的类定义以关键字'export‘开头，但在底部仍然导出默认产品？
代码块A：
import React, { Component } from 'react';
class Products extends Component {
render() {
return (
//bla, bla, bla
)
}
}
export default Products;
代码块B：
import React, { Co
浏览 0提问于2019-06-14得票数 0
回答已采纳
1回答
我的印象是，ES6类基本上是围绕ES5对象系统的语法糖。当我试图在没有转换程序的情况下运行时，我想我可以使用旧的语法来定义从React.Component“继承”的对象“类”。
var Board = function(props, state) {
var instance = {};
instance.props = props;
instance.context = state;
return(instance);
};
Board.prototype = Object.c
浏览 0提问于2016-11-01得票数 3
回答已采纳
我在这里使用广告：网站是用react.js构建的，广告加载正常，控制台没有错误，但广告显示0印象。
我在4-5天内获得了超过50K的页面浏览量。
在我用react.js实现adsense的时候有什么问题吗？
浏览 1提问于2016-07-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
