选择的react元素始终相同
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，可以将UI拆分为独立且可复用的组件，使得开发人员可以更加高效地构建复杂的用户界面。
在React中，元素是构成React应用的最小单位。元素是不可变的，一旦创建就无法修改。所以，选择的React元素始终相同意味着无法改变元素的内容和属性。
React元素由类型、属性和子元素组成。类型可以是HTML标签名（如div、span等）或React组件。属性是元素的配置信息，用于定义元素的行为和外观。子元素是嵌套在父元素内部的其他元素。
React的虚拟DOM机制能够高效地更新和渲染元素。当元素的状态发生改变时，React会自动重新计算元素的差异，并仅更新差异部分，这样可以减少DOM操作，提升性能。
对于选择的React元素始终相同的应用场景，可以考虑使用React的PureComponent或React.memo来优化性能。这些组件会对传入的props进行浅比较，只有当props发生改变时才重新渲染。
在腾讯云的云计算平台中，可以使用腾讯云的云服务器CVM来部署和运行React应用。腾讯云还提供了云存储COS用于存储React应用的静态资源，云数据库MySQL和云数据库MongoDB用于存储应用的数据，云安全中心提供网络安全服务，云函数SCF可以用于处理React应用的后端逻辑等。你可以在腾讯云的官方网站上查找相关产品和产品介绍：https://cloud.tencent.com/
相关·内容
2回答
我才刚开始使用react。我正在开发一个Hello World应用程序。我的index.js如下：
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component{
render() {
return (
<H1>Hello World</H1>
);
}
}
ReactDom.render(
<App /
浏览 2提问于2020-03-21得票数 0
1回答
如何显示从“主选择”到“附加选择”的选择，以便在“主选择”中选择的内容在“附加选择”中自动选择？ import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [optionValue, setOptionValue] = useState([1, 2, 3]);
const onHandleOption = () => {
return optionValue.map((i, idx) =
浏览 16提问于2020-02-01得票数 0
回答已采纳
在我的应用程序中，我使用的是react和with图表。目前正面临一个奇怪的问题和反应。我有一个菜单项，在它的单击事件上，它会做一些处理(比方说，将图表导出为图像)。因此，目前我观察到，它在我的react组件中的任何setState操作上都会被触发。当我查看调用堆栈时，我发现ReactErrorUtils.invokeGuardedCallback一直在反复发送此事件。
是否有人遇到类似的问题，在任何setState操作中都会触发单击的react组件。
浏览 0提问于2016-10-07得票数 7
我正在使用一个反应数据表组件来制作这个表。数据来自道具。但是标题的CSS属性没有改变。我认为这是不正确的。
标题：{ fontColor：'red'，fontWeight：'900‘}
另外，我想知道如何在CSS文件中进行样式化，并在这个表中使用它。找不到任何具体的东西。
这是我的完整密码。
import React, { Component } from 'react';
import DataTable from 'react-data-table-component';
const customStyles = {
titl
浏览 1提问于2020-02-12得票数 3
回答已采纳
我使用的是react-contexify的上下文菜单和react-simple-tree-menu的TreeMenu。 当用户右键单击treemenu中的项目时，将显示上下文菜单。但是，当树节点成为焦点时，上下文菜单的一部分会显示在该树节点的后面。 ? ? 可能的问题是什么？ 代码： import TreeMenu from 'react-simple-tree-menu';
import { Menu, Item, Separator, Submenu, MenuProvider } from 'react-contexify';
cons
浏览 24提问于2019-06-26得票数 0
回答已采纳
我正在测试一个InfiniteScroll 组件，但是它仍然存在这个奇怪的问题；querySelector('html, body')没有所期望的来自上述方法的属性(例如，clientHeight、innerHeight、querySelector、style、addEventListener等)，而是具有诸如_readOnly、_tagName、_created、_ownerDocument的属性，我怀疑这些属性来自于jsdom。
我正在测试套件中运行这个querySelector('html, body')来滚动浏览器。下面是测试套件中document.qu
浏览 1提问于2015-03-16得票数 1
1回答
将前端库导入wix网站
、、、、
我已经开发了一个使用CRA的React应用程序，我正在尝试将其托管在现有的wix页面上。使用WIX，我可以使用javascript文件，所以我将我的应用程序代码与依赖项捆绑到一个文件中，并尝试将react和react-dom代码从其官方cdn复制并粘贴到我的目录中。
不知何故，它仍然不能工作，在react-dom.js中我看到了错误：
'window' is not defined
虽然现在我尝试只使用react和react-dom导入，但这个问题通常适用于将js前端库导入到WIX中。
我需要应用程序代码托管在wix页面中，但我认为如果我使用来自iframe的cdns添加应用程
浏览 22提问于2018-12-17得票数 1
回答已采纳
const onClick = (e) => {
console.log(e.target);
}
const App = () => (
<button
name={'YES'}
className="btn waves-effect waves-light left blue darken-4"
onClick={onClick}
>
Yes
<i className='material-icons left'>done</i>
<
浏览 1提问于2017-03-06得票数 6
回答已采纳
我正在使用react-dropzone，我想让文件上传对话框在页面加载时自动打开。
我写了以下代码，但我不能理解如何让它自动打开，这将是我在ref上做了一些错误的事情，因为我可以访问它的属性。
你能帮我一下吗？
链接：
import React from "react";
import { useDropzone } from "react-dropzone";
import { Chip } from "@material-ui/core";
import { AttachFile } from "@material-ui/icons&
浏览 39提问于2021-04-24得票数 1
2回答
我正在使用React.js和d3.js制作仪表板。我遇到了这个让我困惑了好几个小时的有趣问题。
下面是用Scatterplot.js编写的d3.js
import React, { Component } from "react"
import * as d3 from "d3"
import { ceil, floor } from "lodash"
import "./scatterplot.css"
export default class Scatterplot extends Component {
constr
浏览 2提问于2020-05-26得票数 0
回答已采纳
我目前正在尝试编码一个登录屏幕，当我在其中包装我的文本和图像组件时，会给我一个错误。我正在尝试更改react本机中两个不同视图组件的样式。每次我试图运行我的项目时，我都会得到一个错误：“相邻的JSX元素必须包装在一个封闭标记中。您想要一个JSX片段<>.</>吗？”
我的代码是：
import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { HeaderHe
浏览 5提问于2022-07-16得票数 0
我正在编写MERN应用程序，我几乎完成了它。但是，我在用数据显示单个客户页面时遇到了问题。
我的App.js
import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import CustomersList from "./components/customers-list";
import customerRewards from './components/customerRewards';
im
浏览 2提问于2020-11-12得票数 1
回答已采纳
我想保持我的UI看起来是一样的，无论屏幕分辨率是什么，我在我的游戏视图中运行的16:10，我希望UI保持完全相同，居中，即使屏幕分辨率改变。
UI的屏幕截图
浏览 90提问于2018-09-03得票数 1
我有一个更大、更复杂的组件，没有我所期望的那样，我把它缩小到了一个更简单的组件：
import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
function App(props) {
const [history, setHistory] = useState([props.arr]);
const [currentHistoryIndex, setCurrentHistoryIndex] = useState(0);
const items
浏览 2提问于2019-09-14得票数 0
回答已采纳
3回答
我刚开始使用create-react-app，我刚用npm运行它，现在当我运行npm start时，我得到了这个错误信息
我不确定是什么导致了这个错误，所以我不知道在我的代码中确切地包括什么，所以我将包括我得到的错误，以及它显示给我的导致错误的代码？
×
Target container is not a DOM element.
▶ 2 stack frames were collapsed.
Module../src/index.js
c:/Users/jaybo/React_basics/react_base/src/index.js:7
4 | import App from &
浏览 1提问于2019-04-21得票数 0
我正在做一个组件，它做了一点web抓取，我的问题是，我希望用户输入他们正在寻找的城市和类别，并将这些参数传递给uri，然后根据它得到一个响应。我的问题是，在handleChange函数之前，我对所有的input都做了同样多次的操作，但当我在其中任何一个上输入时，它都不让我输入，输入保持为空……我已经检查并比较了其他正在工作的组件，我没有看到错误。 下面是组件Profesionals.jsx： class Profesionals extends PureComponent {
constructor() {
super();
this.state = {
c
浏览 6提问于2020-01-28得票数 0
回答已采纳
我是新编程的，我想模糊输入元素的类型“文本”。
我想做什么？我在一个react组件中有一个输入元素，这可以使用querySelector获得焦点。现在，在其他组件中，我希望从相同的输入元素中移除焦点。
我尝试过使用querySelector和模糊方法。但没起作用。
下面是我的代码，
class Popup extends React.PureComponent {
render() {
return {
<OverlayComponent
<input
浏览 0提问于2019-11-04得票数 3
1回答
如果我通过地图呈现所有这些选择，我就不知道如何使彼此独立选择。如何正确地实现，在未来的数据将从redux存储？
详细示例代码
import React from "react";
import ReactDOM from "react-dom";
import Select from "@material-ui/core/Select/Select";
import InputLabel from "@material-ui/core/InputLabel/InputLabel";
import FormControl fro
浏览 0提问于2018-10-31得票数 0
回答已采纳
2回答
我正在制作一个脚本，在whatsapp上有人在线时通知您，我有以下内容：
var onlineCheck = window.setInterval(function() {
var y = document.getElementsByClassName("emojitext ellipsify")[19];
if (y == null) {
console.log("online notification failed");
} else {
if (y.innerText === 'online') {
new Notificat
浏览 0提问于2016-12-26得票数 0
回答已采纳
1回答
我是一个新的react &我正在使用material-ui，我想在React中设计一个自定义的自动完成，一旦从下拉列表中选择了数据，它就会显示为文本输入中的芯片。我正在使用material-ui autocomplete的onNewRequest属性，但我不确定如何在其中呈现芯片组件。有人能指导我怎么做吗？我想设计像gmail中的布局一样的收件人。我知道有npm包可用，但我需要纯粹从material-ui设计它，所以请使用正确的方法进行指导。
谢谢
浏览 6提问于2017-06-25得票数 0
回答已采纳
我可以通过driver.find_element_by_xpath('//*[@id="app"]/table/tbody/tr[1]/td[1]')的xpath找到元素。但是有没有办法返回所有的子元素，比如tag和tag xpath呢？
<tr>
<td class="">
<div>
<a href="/user/1">
<!-- react-text: 6011 -->user firs
浏览 2提问于2017-04-19得票数 8
1回答
未找到未定义的GSAP目标
、、、、
使用useSate，我在从法语到英语的两段文本之间切换。它工作的很好，但我想建立一个更好的过渡与GSAP。
我的配置不能工作，因为gsap目标是空的或未定义的。你能帮我调试一下那个问题吗？
带有两个按钮的段落组件：
import React, { useRef, useState } from "react";
import { withRouter } from "react-router-dom";
import gsap from 'gsap';
const LanguageDesc = (props) => {
浏览 0提问于2020-09-29得票数 1
回答已采纳
我正在使用世博会和React Native构建一个应用程序。我需要获取一些设备信息，例如:手机品牌、手机型号，如果可能的话，还需要获取安卓和iOS的Mac地址。在这里，我只要求电话品牌。我试过使用Expo Galaxy，但它只返回 (例如，用于三星 A7的SM-A750GN )。我想要的是像“三星”这样的品牌。
有没有办法在不退出世博会的情况下获得这个品牌？有一个名为“”的库，但我想我必须使用react-native链接来弹出和链接。
浏览 2提问于2019-03-05得票数 0
我有一个父组件：
const MeasuresList: React.FC = () => {
const root = useAppSelector(state => state.tree.root)
const selected = useAppSelector(state => state.stats.selected)
const dispatch = useAppDispatch()
const {data, isFetching} = useGetMeasuresQuery(
(root ? root.element
浏览 1提问于2022-01-24得票数 0
2回答
我已经成功地在我的React应用程序的TextField中增加了标签。我的问题是，当它在收缩时，它只是在它的右边重叠了一些线。
import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"&
浏览 5提问于2020-12-05得票数 0
请考虑React本机中的以下代码：
import React, { useState } from 'react';
import { Text, View } from 'react-native';
export default function App() {
const [recommendations, setRecommendation] = useState<any[]>([]);
return (
<View>
{recommendations != [] ?
(
浏览 5提问于2020-06-04得票数 0
回答已采纳
我正在创建一个react原生应用程序，我对手机之间的点值有何不同感到困惑。我已经确认iPhone 8和iPhone 11的像素密度都是2 (Apple list of device screen sizes and pixel densities)，世博会也希望是一样的。(Expo PixelRatio docs) 但是，如果我在iPhone 8和iPhone 11上创建一个视图元素并将其高度设置为400，那么它们的大小显然是不同的。为何会是这样呢？ 代码示例如下： import React from 'react';
import {View, PixelRatio} fr
浏览 26提问于2021-02-12得票数 1
我创建了一个具有多个值的选项，当我单击这个堆肥材料时，我想恢复这个特定值，但目前它只显示未定义的值，我想恢复“值” 但是，当我在onclick方法外部创建console.log时，我看到显示的值 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0
浏览 23提问于2020-04-07得票数 0
2回答
我正在做一个用户注册/登录页面。我有两个表单，一个signUp表单和一个logIn表单，还有一个名为signInState的状态，它决定要显示哪个用户表单。我有两个按钮来切换signInState，如果signInState是真的，我希望它在表单中显示日志，如果是假的，我想显示注册表单。状态正在改变，但由于某种原因，条件呈现无法工作。有人能帮我弄清楚为什么我的toggleSignInState不改变页面上呈现的内容吗？谢谢
下面是我对signInPage本身的反应代码
import React from 'react'
import SignUp from './Sig
浏览 5提问于2022-11-02得票数 1
回答已采纳
我正在使用react测试库和jest测试我的react应用程序。 我想知道如何在react-testing-library中获取带有'name‘属性的元素。 例如，在下面的页面中，是否可以使用"userName“来获取此元素？ <input type="text" name="userName" /> 或者我应该在元素中设置data-testId并使用getByTestId方法？ return (
<div>
<input type="text" name="userName&#
浏览 24提问于2021-02-01得票数 5
2回答
我有以下问题。我有一个名为Modal的子组件，它由一个引导按钮和一个弹出窗口组成。Modal出现在一个名为renderPosts的呈现组件中。
Component.js
deleteThis(id){
console.log("THE ID IS", id);
}
renderPosts(post) {
return (
<tr key={post.id}>
<td className="col-md-3"> {post.id}</td>
浏览 5提问于2016-11-25得票数 0
回答已采纳
我正在尝试实现一个按钮，它在两个显示的窗体之间切换。但是，这是无效的，因为在按钮单击时不会发生任何更改。我有以下代码：
import React, {Component} from "react";
import ShortenForm from "./ShortenForm";
import UnshortenForm from "./UnshortenForm";
class FormSelector extends Component {
constructor(props) {
super(props);
浏览 3提问于2020-05-10得票数 0
回答已采纳
每次单击加号图标时，我都会添加一个新的输入，但它总是将其添加到末尾。我希望它被添加到被点击的项目旁边。
这是我使用过的React代码。
const Input = props => (
<div className="answer-choice">
<input type="text" className="form-control" name={props.index} />
<div className="answer-choice-action">
浏览 2提问于2018-05-13得票数 1
我在学反应，真的很喜欢。我想问一下，我们是否可以根据类名呈现虚拟DOM文档。
React.render(
<CommentBox url="data/comments.json" pollInterval={2000} />,
document.getElementById('class')
);
我试着通过
getElementByClassName(“类”)
作为react的呈现方法的第二个参数，它不起作用。是否只将DOM呈现给仅使用ID的节点，还是也有解决办法来使用带有类的节点？
浏览 5提问于2015-09-14得票数 7
回答已采纳
当我使用这个代码时：
html : <body>
<button>Click me</button>
<script type="module" src="1.js"></script>
</body>
JS : const btn = document.querySelector('button')
class Events {
constructor() {
console.log(this)
btn.addEventListener(
浏览 1提问于2021-04-10得票数 2
回答已采纳
1回答
我正在用动态高度的自定义单元格填充UITableView。我正在使用所描述的方法。
为了简单起见，假设我的单元格包含2 UILabels，如下所示。
紫色UILabel将保持与UITableView中所有细胞相同的高度。在这种情况下，紫色UILabel比绿色UILabel高。我希望紫色UILabel的底部和contentView的底部之间的约束是8。
但是，还有第二种可能的情况，如下所示。
在这种情况下，紫色UILabel仍然和第一种情况相同(尽管看起来更小，但由于整体单元格高度较大，相对来说，它看起来更小)，然而绿色UILabel要大得多。在这种情况下，我希望绿色UILabel的
浏览 2提问于2015-02-03得票数 1
回答已采纳
1回答
我正在尝试编写一个测试来检查<select>下拉列表中的更改后的值。这是我的组件： import React from 'react';
const BasicDropdown = ({ key, value, options }) => {
return (
<div className={`basic-dropdown-${key}`}>
<select
className={`basic-dropdown-${key}-select`}
name={`basic-dropdow
浏览 14提问于2020-09-24得票数 0
这是来自雅虎金融的HTML代码
<p class="class="D(ib) W(47.727%) Pend(40px)">
<!-- react-text: 561 -->
"1601 Willow Road"
<!-- /react-text -->
<br>
<!-- react-text: 563 -->
"Menlo Park, CA 94025"
<!-- /react-text -->
<br>
浏览 4提问于2022-01-06得票数 0
当我在app.js中给出部件时，它可以工作，但是当它被放入另一个文件navbar.js并导入时，它会显示空白屏幕。如果navbar.js中的代码是直接在app.js中添加而不是导入，那么它可以正常工作，并出现导航条。否则将出现空白屏幕。
index.js如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElemen
浏览 4提问于2017-06-17得票数 2
回答已采纳
这是使用参考文献的解决方案。
import React, { useState, useRef } from "react";
function Bar() {
const ref = useRef();
return (
<div
ref={ref}
onClick={(ev) => {
if (ev.target == ref.current) console.log("Target hit");
浏览 1提问于2020-07-23得票数 0
回答已采纳
1回答
如何管理react组件的主题
、、、、
我希望有一种稳定和可伸缩的方式来实现我的rails项目中的主题。目前，react组件有自己的CSS文件，样式管理使用CSS-模块.为react组件设置不同的CSS主题的最佳方法是什么？
特地问
用于实现各种主题的CSS文件的更好的文件组织是什么？
如何将这些主题应用到现有的react组件中，这样我就可以将一个主题应用到根节点上，而在组件树下的所有react组件都将被应用到主题上？
浏览 1提问于2016-02-29得票数 3
考虑以下HTML：
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<inp
浏览 0提问于2013-09-03得票数 4
回答已采纳
我不知道为什么我不能让它工作。我选择了MuiInputBase-root元素，告诉它选择字段并将边框颜色设置为蓝色，然后在focus上将边框颜色设置为红色。我在这里做错了什么？ Codesandbox import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
imp
浏览 16提问于2020-04-22得票数 2
回答已采纳
假设我有：
const AddItemButton = React.memo(({ onClick }) => {
// Goal is to make sure this gets printed only once
console.error('Button Rendered!');
return <button onClick={onClick}>Add Item</button>;
});
const App = () => {
const [items, setItems] = useState([]);
c
浏览 3提问于2019-02-13得票数 27
回答已采纳
3回答
为什么我在构造函数中创建的<select>在我选择另一种样式时没有更新？另一个select以及文本也会被更新。
class ConstructorComponent extends React.Component {
constructor() {
super();
this.state = {
icecream: 'vanilla',
};
this.select = (
<select
value={this.state.icecream}
浏览 1提问于2018-02-24得票数 2
回答已采纳
2回答
我的第一次反应应用程序有问题。实际上，我有一个组件层次结构(我正在创建一个多媒体电影库)，在单击一个选项卡(由Movie表示)时，必须显示单个电影(SingleMovieDetails)的特定描述。问题是，DOM只在第一次单击时更新，然后即使SingleMovieDetails道具发生变化，DOM仍然锁定在第一个呈现的电影上。
这是我迄今写的代码..。
//Movie component
import React from "react";
import styles from "./Movie.module.scss";
import PropTypes fr
浏览 0提问于2019-04-02得票数 1
回答已采纳
我遵循下面的教程关于反应材料网络组件(RMWC)，并与风格和主题章节混淆。
在本章中，作者试图解释使用标准CSS和CSS模块之间的区别，但我无法理解这一点。两者之间有什么区别，为什么我们使用CSS模块，它与标准CSS有什么不同？
我也尝试使用CSS模块来应用CSS，但是CSS并没有应用到元素上。我在这里做错什么了吗？
我正在使用创建-反应-应用程序。
我的代码(样式没有被应用)：
index.js
import React from 'react'
import ReactDom from 'react-dom'
import styl
浏览 0提问于2019-01-27得票数 1
回答已采纳
请看。我正在尝试创建一个receives，它同时接收一个函数组件和一个在自定义中调用的函数。
要做到这一点，我需要创建一个react组件来返回这个临时组件。需要在临时调用中调用的函数需要与react组件共享它的作用域，因为它可能会做一些事情，比如更改组件的状态或进行api调用。我试图创建一个嵌套的react组件，但是当我这样做时，我得到了以下错误：
警告:函数作为React子函数无效。如果返回组件而不是呈现，则可能会发生这种情况。或者您打算调用这个函数，而不是在SampleComponent中返回它。
如何创建既接受function组件又接受要调用的函数的react？谢谢!代码还可以在
浏览 3提问于2020-02-07得票数 0
回答已采纳
4回答
嗨，我在react中映射url有困难。我是完全新的反应js。我正在尝试将组件呈现到我的App中，当我呈现组件时，事情进行得很好，但是当我试图将它呈现为一个路由时，我尝试了这个错误，我尝试了一些可用的解决方案堆栈溢出，比如导入它作为‘react.i’，路由而不是Route，但是仍然无法修复这个bug.please指南来修复这个错误。
enter code here
import {
BrowserRouter as Router,
Route,
} from "react-router-dom";
import './App.css';
import
浏览 6提问于2022-01-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
