react中的子组件的呈现与react原生的不同吗？
在React中，子组件的呈现与React原生的方式是不同的。React中的子组件呈现是通过在父组件中使用特定的语法来实现的，而不是像React原生那样直接在父组件中编写子组件的标记。
在React中，子组件的呈现是通过在父组件的render方法中使用组件标记来实现的。父组件可以通过将子组件作为标签属性传递给子组件来呈现子组件。例如：
class ParentComponent extends React.Component {
render() {
return (
<div>
<h1>Parent Component</h1>
<ChildComponent />
</div>
);
}
}
class ChildComponent extends React.Component {
render() {
return <h2>Child Component</h2>;
}
}在上面的例子中，ParentComponent中的render方法中使用了<ChildComponent />标签来呈现子组件ChildComponent。
相比之下，React原生的方式是直接在父组件的render方法中编写子组件的标记。例如：
class ParentComponent extends React.Component {
render() {
return (
<div>
<h1>Parent Component</h1>
<h2>Child Component</h2>
</div>
);
}
}在上面的例子中，父组件直接在render方法中编写了子组件的标记。
总结起来，React中的子组件的呈现方式与React原生的方式是不同的。在React中，子组件的呈现是通过在父组件中使用特定的语法来实现的，而不是直接在父组件中编写子组件的标记。
相关·内容
我目前正在自学RN，没有React的先验知识。很多东西似乎同时存在于Redux和hooks中。我找到的许多资源都在标题中提到了React (例如"Redux Crash Course With React")。
我的问题是: React和React Native之间的界限在哪里？我可以从这些关于React的资源中学习吗，或者这会让我感到困惑吗？
我正在尝试理解一种go to方法，以了解哪些资源我可以使用，哪些资源无关紧要。
浏览 27提问于2019-12-01得票数 1
回答已采纳
我有一个React类，它在react-redux的Provider中呈现。
<Provider store={store}>
<First/>
</Provider>
因此，我可以很容易地在react-redux的mapDispatchToProps和mapStateToProps中使用First。
但是在First中，我呈现的另一个组件如下所示：
ReactDOM.render(
React.createElement(Second),
document.getElementById('preview-right&#
浏览 1提问于2017-01-07得票数 1
不久前，我从ES6开始使用+ React，在此表单上应用验证方法遇到了困难，我正在使用，问题不是语法，而是如何/在何处在状态和道具之间以及何时通过这些验证的方法。
我构建的表单如下：
在调用App.js作为子组件调用FormErrors的ComponentForm中，我已经开始声明字段，但是我不知道在哪里应用验证，我很乐意从简单的FormErrors组件中获得传入的错误。
为了简洁起见，已经删除了无关的consts/vars (api键、电子邮件消息等)。
我的表格：
import React, {Component} from 'react';
import validato
浏览 0提问于2018-04-01得票数 1
2回答
如何使用react-router为其中一个页面创建具有锚点的链接？
示例:我想要这样的东西：mysite.com/#/nodes/10#instances
这将指向由/nodes/:id处理的路由，然后选择与“实例”对应的页面上的选项卡(react-boostrap选项卡)。
浏览 4提问于2015-12-02得票数 2
回答已采纳
开始我的第一个rn学习项目，并停留在其他地方。基本上，在用户登录后，我希望在顶部显示一个文本。 IDComponent.js import React from 'react';
import { Text } from 'react-native';
const IDComponent = () => {
//generate the ID
const id = generateId();
return (<View><Text>{id}</Text></View>);
};
export
浏览 10提问于2020-09-27得票数 0
如何在React.createClass()中处理自定义javascript属性？
下面是一个例子：
var RouterView = React.createClass({
mixins: [Morearty.Mixin],
isAuthorized: false, // should it be part of state ??
isVerified: false, // should it be part of state ??
bindToAuthorization: function() {
if(/* blah-blah-blah *
浏览 2提问于2015-12-17得票数 0
回答已采纳
1回答
我正在写我的第一个反应应用程序使用Next.js，我遇到了一个困难。我的页面上有一张地图。Map是非常复杂的元素，我需要在其中插入react组件。所以情况是：
<body>
<SomeContext.Provider value={...}>
<React>
<Dom>
<TheMap />
</Dom>
</React>
</SomeContext.Provider>
</body>
Map只是一个包装元素，并且使用use
浏览 0提问于2021-05-26得票数 1
回答已采纳
我想在react原生中使用某个组件，但是所有的第三方组件都是作为基于类的组件编写的。在功能组件中使用基于类的react组件是一种反模式吗？例如：
import * as React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import ClassComponent from 'SomeOldClassBasedCompont';
export default function TabOneScreen() {
return (
浏览 0提问于2021-10-19得票数 1
首先，我有一个基本的英语水平。所以我希望你能理解。 react原生中的子组件的重现在react中是否不同？让我给你举个例子： class App extends React.Component{
constructor(props) {
super(props);
}
render(){
return(
<ChildComponent />
)
}
componentDidMount() {
this.setState({test:'test'})
}
} 这在react rer
浏览 7提问于2019-09-12得票数 2
1回答
酶的浅层和堆积
、、
下面是组件计算器。
import SubComponent from './SubComponent';
export default class Calculator extends React.Component {
render() {
const {
result,
} = this.state;
return (
<form>
<input
type="number"
defaultValue={0}
re
浏览 0提问于2018-09-12得票数 0
回答已采纳
我想做一个web应用程序，最初将只在浏览器中使用。但是，如果性能不够好的话，我希望能够在以后的某个时候使用这个react。
我最初打算使用react.js和类似于引导的东西，但是这不会使以后的移植变得更加困难吗？例如，它看起来像是react-本机是基于flexbox的，所以我应该从一开始就使用flexbox吗？
浏览 3提问于2016-01-31得票数 0
回答已采纳
我正在尝试构建一个带有自定义输入字段的表单。问题是形式的结构不是事先就知道的。我希望它能抽象出尽可能多的通用功能。因此，我创建了一个表单组件，它实际上负责存储所有输入组件的值，并在提交时执行操作。在表单中休息，说明html应该如何由用户编写。
下面是一个快照：
自定义输入字段：
class InputField extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
id: this.props.
浏览 0提问于2016-06-09得票数 0
我在使用react: 17.0.2和react-router-dom: 6.3.0。
我当前的App.js片段如下所示：
class App extends React.Component {
render() {
return (
<div className="App">
<Routes>
<Route element={<Layout/>}>
<Rou
浏览 4提问于2022-05-26得票数 2
回答已采纳
1回答
我想了解下面的React代码；具体来说，我假设is呈现组件，但是上面代码段中的“欢迎”引用了顶部的"Welcome“函数，而rendinring运行函数经过3次迭代，每个名称一个吗？
..。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Caha
浏览 2提问于2017-10-24得票数 0
回答已采纳
我在我的function应用程序中创建了这个函数来获取一个url并检查状态。
import { useEffect, useState } from 'react';
const fetchStatusCode = (url: string) => {
const [data, setData] = useState<string | null>(null);
useEffect(() => {
const fetchStatus = async () => {
const response = await fetc
浏览 5提问于2022-11-02得票数 -2
如果父母重新呈现，反应中的孩子也会被重新呈现，不管传递的道具是否改变。
，为什么会这么做？如果当父母呈现时，如果不重新呈现子元素(没有更改的道具)，那么会有什么问题呢？
更新:我在分析器中谈到了这一点：
示例代码：
App.tsx：
import React, { useMemo, useState } from "react";
import "./App.css";
import { Item, MyList } from "./MyList";
function App() {
cons
浏览 8提问于2021-01-09得票数 15
首先，这里的“重呈现”的意思是
任何类组件的render()方法都被调用，或
函数组件的函数被调用。
让我们将实际DOM中的元素称为“刷新”，以区别于“重新呈现”。
“重呈现”的规则是否简单如：
当更改组件的任何状态时，组件和该组件下的所有子树都将重新呈现。
就这样？例如：
function A() {
console.log("Component A re-render");
return <div>Component A says Hello World</div>;
}
function App() {
浏览 3提问于2020-02-18得票数 4
2回答
我认为我不完全理解父母/孩子的关系是如何反应的。我有两个组件，Column和Space。当呈现一个Column时，它会创建一些Spaces。我以为这意味着Column将是这些Spaces的父级，但要么我错了，要么我错误地使用了React.Children.count(this.props.children)的某些部分--它总是告诉我，任何给定的Column都有0个子级。
简化模型：
var Column = React.createClass({
getInitialState: function() {
return {childCount: '',
浏览 4提问于2016-08-25得票数 1
回答已采纳
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
我正在尝试使用反应测试库，看看我们是否应该在我们的项目中使用它。我们使用jasmine而不是jest。我想知道jasmine是否可以很容易地使用react-testing-library (应该没问题……)
我看到的大多数示例都是使用jest。在jasmine中使用react-testing-library有什么注意事项吗？有没有一些例子？
谢谢
浏览 3提问于2019-02-13得票数 1
注意，我改变了问题的描述。状态是一个具有许多属性的对象，而不是一个数组。即使它是一个数组，这个问题仍然存在，而且是相似的.
我正在开发一个反应性网络应用程序。根组件有一个名为user的状态变量。user有许多属性，每个子组件只使用其中的一个子集。我正在考虑使用react和Memo来让所有子组件都可以访问user。我已经读过，使用备忘录只会导致修改后的子组件呈现，而不是全部呈现。但是我不确定我是否正确地实现了所有这些，也许所有的子组件都会呈现出来？
将发生的一个场景是，其中一个子组件对user中的一个属性进行更改，并在根组件中调用set_user(newUserWithOnePropertyUp
浏览 2提问于2020-12-16得票数 0
回答已采纳
6回答
React中“父组件”的定义是什么？
例如：
const A = () => {
return (
<B>
<C/>
</B>
);
}
A是C的父母吗？
B是C的父级吗
后续行动：
B通过children支柱获取C元素。如果C是B的孩子，那么B应该是C的父级。但实际上，这应该是一个containment，正如所提到的。
浏览 9提问于2022-03-09得票数 5
1回答
在我新的top本地应用程序的顶部创建了一些样板代码。
export default class App extends Component < {} > {
render() {
...
}
}
在的基础知识网页中有一个关于的部分。在本节中，它提到
组件可以非常简单-唯一需要的是呈现函数.
我在API列表中看不到Component的条目。我假设这个Component与Object中的Object具有相同的思想，作为所有东西的基类。Java的Object类提供了一些方法，如toString()。
我想知道：
我的假设正确吗？
是否有指向
浏览 0提问于2017-12-06得票数 0
回答已采纳
上下文
我正试着用google-map-react展示当地的面包店。
但是，我的子组件console.log(props);中的行StoresGoogleMap将storeLocations和stores打印为[]。如果我在我的StoresGoogleMap组件中使用下面的内容，则它正在工作：
{props.storeLocations.map((storeLocation) => (
<Marker
key={storeLocation.unique_store_name}
lat={st
浏览 10提问于2022-02-22得票数 0
回答已采纳
我有一个父组件和子组件，在我的示例中，当单击“增加”按钮时，子组件将被重新命名。
import React, {useEffect,useState} from 'react';
export const App = (props) => {
const [count, setCount] = useState(0);
const handleCount = ()=>{
setCount(count+1);
}
useEffect(()=>{console.log("Parent was rerendered")})
浏览 3提问于2022-08-01得票数 1
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
1回答
我正在使用enzyme编写一些测试，但我有一些奇怪的行为。这是我的测试：
import React from 'react'
import { TypeTable } from 'routes/Type/components/TypeTable'
import { shallow } from 'enzyme'
import { Table } from 'react-toolbox'
// ...
let _props, _wrapper
beforeEach(() => {
_p
浏览 3提问于2016-10-24得票数 2
回答已采纳
1回答
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
浏览 0提问于2018-05-19得票数 6
回答已采纳
这两者之间有什么相似之处？我知道它们是为不同的平台开发的，React是为web开发的，React Native是为移动开发的。但它们都是Facebook为解决类似问题而开发的。那么，有重叠吗？有相似之处吗？
浏览 1提问于2017-05-12得票数 3
1回答
当我与某个状态管理器一起使用(我使用的是recoil.js)时，我尝试用react更新状态，它只在状态与原始状态不同时才调用useEffect。当我在讨论组件重登程序的堆栈溢出时，他们谈论的是类组件，以及每次调用setState时如何呈现。这只是两个组件类型之间的区别，还是我只是误解了它？
这是我对函数组件的代码测试：
import React, {useEffect} from 'react'
import ReactDOM from 'react-dom'
import {atom, useRecoilState, RecoilRoot} from '
浏览 4提问于2021-01-12得票数 1
回答已采纳
我在我的项目中使用MUIv5和React路由器v6，在这个项目中，我想在页面周围包装一个布局，但是页面没有呈现，我得到的只是一个空的div
这是我的应用程序组件：
import React from "react";
import { Routes, Route } from "react-router-dom";
import { CssBaseline } from "@mui/material";
import MainLanding from './routes/MainLanding';
import StoreLan
浏览 3提问于2022-01-25得票数 8
回答已采纳
我有两个代码，一个是在子程序中使用独立状态，另一个是在我的“作为道具发送”版本中，状态作为道具发送。
function App() {
const [isChanged, setIsChanged] = React.useState(false);
const [i, setI] = React.useState(0);
React.useEffect(() => {
console.log("USEEFFECT");
setTimeout(() => {
setIsChanged(true);
}, 2000);
浏览 5提问于2020-05-17得票数 1
我正在为我的网站制作一个登陆页面，它将有3个组件-页眉、主页和页脚，仅供登陆页使用。标题组件只是一个导航条，左边有一个徽标，右边有一个登录按钮。
当单击“登录”按钮时，我使用路由器呈现登录路由，但问题是，“登陆”页面的前几个组件(标头、主和着陆)也使用新的“路由登录”组件呈现。
这是插入兰丁的App.js文件。
import React, {Component} from 'react';
import Landing from './components/Landing/Landing';
class App extends Component {
浏览 0提问于2019-04-24得票数 3
回答已采纳
基本上，我有一个非常简单的react组件。它所做的就是包装“react-intercom”，并且只有在状态发生变化时才会呈现它。为了简化这个问题，我将shouldCompoenentUpdate()方法硬连接为总是返回false。
import React from 'react';
import Intercom from 'react-intercom';
class IntercomWrapper extends React.Component {
shouldComponentUpdate(nextP
浏览 6提问于2017-09-13得票数 15
为了更新子组件中的props对象，通常使用生命周期方法ComponentWillReceiveProps。但我意识到，可以在不侦听ComponentWillReceiveProps的情况下更新子组件的props。
例如，在以下名为App的组件中，子组件Comp能够在不侦听生命周期方法ComponentWillReceiveProps的情况下接收props。
主要的App组件：
import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp
浏览 6提问于2019-07-09得票数 2
嗯，这可能是一个愚蠢的问题，但我想澄清一下原因。React-Native导入了nodeJS库，所以我认为也可以使用reactJS库，尽管reactJS包含纯html组件。
react原生可以识别包括html的reactJS组件吗？
浏览 12提问于2018-03-06得票数 16
回答已采纳
1回答
最近我开始在React-Native上工作，之前我曾经在React上工作过，因为我是新手，我正在努力处理许多需求，例如在两个列表之间拖放实际上在使用HTML/React时非常简单，但在React-Native中它是如此复杂，没有库来支持这个功能，我从来没有遇到过这样的困难，有没有一种方法可以在React-Native中使用任何React库，或者是否有人可以帮助我使用React-Native库，在那里我可以使用可拖动的Flatlist在彼此之间拖动，以及可以选择将其移动到另一个列表。
在过去的几周里，我一直在为这个需求而苦苦挣扎，我已经用谷歌搜索了很多。
也尝试了一些React-Native库，
浏览 15提问于2019-11-24得票数 0
回答已采纳
1回答
有记忆的组件的子组件也有记忆吗？
、、、、
从useMemo返回的子组件或包装在React.memo()中的子组件也会被记忆吗？(抱歉，这可能是一个愚蠢的问题) 例如： React.memo(); 在这里，父母被记住了，孩子是不是也被记住了？
浏览 27提问于2021-02-20得票数 2
回答已采纳
我正在尝试学习上下文API，我想要实现的是在我的标题中显示登录用户，以及根据登录状态操作我的菜单选项(在状态中存储'isAuthenticated‘安全吗？)
我的文脉课：
import React from 'react';
const Context = React.createContext();
export class Provider extends React.Component {
state = {
isAuthenticated: true,
user: {
name: "
浏览 0提问于2019-06-13得票数 7
回答已采纳
我们已经使用React Native构建了一个应用程序，目前正在寻找测试云服务。
Xamarin看起来是个不错的选择，但是它能和React Native一起工作吗？
浏览 2提问于2017-03-21得票数 2
我不明白用写的陈述的意义
cloneElement()
React.cloneElement(元素、道具、...children )
克隆并返回一个以元素为起点的新的React元素。结果元素将有原始元素的道具与新道具浅合并。新的儿童将取代现有的儿童。将保留原始元素中的键和引用。
React.cloneElement()几乎等同于：
<element.type {...element.props} {...props}>{子类}</...element.props.>
然而，它也保留参考文献。这意味着，如果你有一个有裁判的孩子，你不会意外地从你的祖先那里偷走它。您将获得
浏览 0提问于2019-02-09得票数 10
回答已采纳
3回答
我写了一个有趣的酶测试如下：
import React from 'react';
import ManageDrugTermPage from '../js/manageDrugTermPage.jsx';
import toJson from 'enzyme-to-json';
describe('manage drug term page test suite', () => {
it('snapshot test', () => {
const setRouteLeaveHook =
浏览 1提问于2017-05-17得票数 6
回答已采纳
2回答
有一次我试图创建一个react原生应用程序，但我发现它很难，也不适合我的需要。然后我迁移到react，我在web编程方面有点乞讨，我记得在react native中有一个术语叫做“导航”，以及许多库，它们让你能够以许多不同的方式在屏幕之间导航，堆栈导航器等等……现在我开始使用react，我开始使用material-ui，但我找不到任何关于导航的东西它似乎所有与导航相关的东西都与react原生相关(我不确定我是否可以在react中使用它，至少我没有找到任何引用)也许在react应用程序中有另一个术语来表示导航？我看了react-router-dom视频，但我不想玩网址，它将是phonegap应用
浏览 1提问于2018-09-27得票数 0
在我的handleClick函数中，我将电影添加到一个新的数组中。但是，我也想同时更改显示文本。
例如，下面是我的函数，它将电影添加到监视列表中。
const addFavoriteMovie = (movie) => {
const newFavoriteList = [...favorites, movie];
setFavorites(newFavoriteList);
saveToLocalStorage(newFavoriteList);
};
以及它是如何返回的：
<div className='row'>
浏览 2提问于2020-11-25得票数 0
回答已采纳
1回答
我有一个组件，它打开一个引导模式(使用react-bootstrap4-模态)
它使用以下方法打开和关闭
{this.state.inEditMode ? <MemberModal /> : null}
但是，由于组件已经嵌套在DOM中的某个地方，所以它不是引导模式标记的有效位置。它在底部留下了一个讨厌的白色条，如果它位于最外层的<App/> div标记中，就不会发生这种情况。
有什么简单的方法来解决这个问题吗？还是需要我将所有的模态组件都放在<App/>中，并从嵌套的子级中更改<App/>的状态？
浏览 1提问于2018-05-31得票数 0
回答已采纳
我正在将现有的react应用程序从使用director迁移到使用react-router。虽然到目前为止我很喜欢它，但使用director维护历史记录而不重新渲染整个页面是很容易的，我不确定使用react-router是否可以做到这一点。
我想要做的是有一个视图，我们称它为Slides，还有另外两个嵌套视图组件，我们称它们为One和Two。
在路由器中，这些组件将映射到/slides、slides/one和slides/two。
Slides包含各种布局组件，如Header、Nav和Footer。这些基本上都是静态的。
现在，当在幻灯片之间导航时，将播放一个过渡动画。使用我之前的路由器，我能够
浏览 3提问于2016-08-08得票数 0
回答已采纳
请告诉我why my header render every time already use React.memo ?，当我从my apps到user header的导航时，我有两部分my app and user，为什么？
这是我的密码
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
const Header = React.memo(function() {
console.log("Head
浏览 2提问于2020-04-22得票数 3
回答已采纳
我已经创建了一个组件componentDidMount()数据，它具有从API获取数据的函数。之后，我将其导入到主组件中。主组件有一个呈现方法，其中我有一个简单的结构:第一个div -一些信息和导入的组件数据，第二个div是一个按钮，它打开一个模型，它有一些文本和按钮关闭这个模式对话框。我已经读过，componentDidMount()只在组件呈现后被调用一次。但是当我同时按下按钮打开我的模态页面时，componentDidMount()又被调用了。我需要的是，当我打开模态框时，componentDidMount()不会运行。但只有在呈现或刷新页时才运行。
主组件
import React f
浏览 1提问于2020-03-19得票数 0
回答已采纳
3回答
ReactJS新手。使用。
问题：
我有一个容器(React.Component)，它从redux-saga中执行的异步调用中接收数据。当数据存储到状态中时，容器会按照ReactJS的预期进行更新。数据被传递给两个不同的子组件，这两个子组件使用数据呈现图表。问题是，当一个组件使用的数据发生更改时，整个视图都会刷新，这意味着另一个组件会重新呈现。
代码:容器
export class Social extends React.Component {
render() {
return (
<div>
<SocialChart data={
浏览 2提问于2016-11-03得票数 3
我有一个使用Material UI v5的react应用程序。我没有任何样式，正在使用默认的TextField组件来测试渲染问题。在我的页面中，我只有一个Typography、Breadcrumb、IconButton和TextField。为了复制这个问题，我放置了一个受控TextField和大约六个其他非受控TextFields。当我开始在受控的TextField上编写代码时，页面中的所有组件都开始重新呈现。如果我开始大量/更快地输入，它有时会冻结，或者需要一段时间(比如500-1000ms)才能在TextField中呈现文本。基本上，它会冻结一秒或半秒。 这是我所拥有的replicate
浏览 17提问于2021-09-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
