如何在React JS中有条件地向组件传递属性
在React JS中，可以使用条件语句来有条件地向组件传递属性。以下是一种常见的方法：
- 首先，确定需要根据条件传递属性的组件。
- 在父组件中，使用条件语句（如if语句或三元表达式）来判断是否满足条件。
- 如果条件满足，创建一个包含所需属性的对象。
- 将该对象作为属性传递给子组件。
下面是一个示例代码：
import React from 'react';
const ParentComponent = () => {
const condition = true; // 根据条件设置布尔值
// 根据条件创建属性对象
const props = condition ? { prop1: 'value1', prop2: 'value2' } : {};
return (
<div>
<ChildComponent {...props} />
</div>
);
};
const ChildComponent = (props) => {
// 使用传递的属性
return (
<div>
<p>{props.prop1}</p>
<p>{props.prop2}</p>
</div>
);
};
export default ParentComponent;在上述示例中，我们在父组件中定义了一个条件变量condition，根据条件的真假来决定是否传递属性给子组件。在这种情况下，如果条件为真，我们创建一个包含prop1和prop2属性的对象props，否则创建一个空对象。然后，我们使用展开操作符{...props}将属性传递给子组件ChildComponent。
这种方法可以根据条件动态地向组件传递属性，使得组件能够根据不同的条件进行不同的渲染或行为。
相关·内容
1回答
我是React的新手，我正在尝试通过App (parent)通过props with React Router将数据从子组件传递到子组件。据我所知，你必须从一个孩子回调道具到应用程序，然后再回调到孩子。 主要的问题是如何通过回调和React路由器从Child.js到App.js获取属性。 App.js class App extends Component {
constructor(props) {
super(props);
this.state = {
value_key: ""
}
}
resultCallback
浏览 17提问于2020-07-20得票数 0
我在组件中显示图像时遇到问题。我设法得到了我需要的所有数据(价格，描述，标题)，但我无法获得图像。这个过程是，当用户单击一个组件时，它会打开该特定产品的pdp。 可以肯定的是，错误在这里：<img src={this.state.image} className="pdp-image"></img> 我应该放入WHat而不是this.state.image吗？ 提前感谢！ 我的代码结构： App.js
├── Header.js
├── Home.js
├── shop.js
├── PictureCard.j
浏览 5提问于2021-01-01得票数 0
回答已采纳
我有一个名为主页的组件，在这个组件中，我喜欢使用同样的导航条，与另一个名为shop.js的组件使用不同的数据。
这是家庭组件
const Home = () => {
return (
<React.Fragment>
<Header/>
</React.Fragment>
);
};
这是标头组件
const Header = () => {
return (
<header>
<TopModal/>
浏览 8提问于2022-04-08得票数 -1
我有一个应用程序，一个导航栏和一个内容类，我试图传递一个道具从导航栏到内容，将呈现时，我重定向到内容页面。
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Home/Navbar';
import Content from './components/Home/Content';
e
浏览 22提问于2019-08-02得票数 0
回答已采纳
我正在尝试创建一个带有文本的平面列表，但它只选择了一个值，但我想从列表中选择多个值。而且我还需要为选定的项目更改颜色。这里我正在从api中获取数据。下面是我的代码： import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { FlatList } from "react-native";
import {
stepDone,
setInputData,
} fr
浏览 14提问于2019-02-01得票数 0
1回答
因此，我在react JS上做了一个tic-tac-toe项目，我必须将正方形组件的密钥传递给开发checkWinner函数的游戏组件(父组件)。请指导我如何传递它，因为我必须通过键定位每个正方形组件的值。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/1
浏览 1提问于2020-05-11得票数 0
我呈现了两个组件SearchForm和RecentSearch，如下所示
var SearchFormContainer = React.createClass({
render: function() {
return (
<div>
<SearchForm />
<RecentSearch />
</div>
);;
}
});
SearchForm中有一种状态。根据我想要呈现的RecentSearch组件的状态。如何检查SearchFrom的
浏览 0提问于2016-05-14得票数 1
3回答
我想要创建一个函数，它用同一个类迭代所有元素，并删除一个特定的类。
使用JavaScript可以很容易地做到这一点。
const boxes = document.querySelectorAll(".box1");
function remove_all_active_list() {
boxes.forEach((element) => element.classList.remove('active'));
}
但我怎样才能做类似的事呢？我面临的问题是，我不能使用document.querySelectorAll(".box1"
浏览 3提问于2021-06-30得票数 3
回答已采纳
我想在props中传递一个ID给我使用react-router-dom的组件react这里是我的app.js文件
<Switch location={this.props.location}>
<Route exact path="/" component={Home} />
<Route path="/list" component={List} />
<Route path='/img/:imgId' component={() =&
浏览 0提问于2018-08-17得票数 6
回答已采纳
我最近才开始研究javascript和React.js。目前，我的main.html文件中有几个脚本标记，我需要能够访问React.js组件中这些标记中的一些变量。有这样的事吗？
浏览 2提问于2016-07-01得票数 5
我的App.js中有以下内容：
import { Box } from "@mui/system";
import Header from "./components/Header";
import ProjectList from "./components/ProjectList";
import CardLayout from "./components/CardLayout";
import React, { useState } from "react";
function App() {
cons
浏览 12提问于2022-02-28得票数 0
回答已采纳
我买了一个关于Udemy的反应本土化课程，教React的人使用了{...this.props}。但这对我没用。这是错误消息。
TypeError:未定义不是对象(计算'_this.props')
我该怎么办？
LoginForm.js
import React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import Input from '../components/Input';
const
浏览 6提问于2020-03-04得票数 1
回答已采纳
我是react的新手，我正在尝试找出在react中使用内联样式的正确方法。
例如，这是我正在做的事情
import React from 'react';
import Classes from './toolbar.css';
import Logo from '../../logo/logo.js';
import Navitems from '../navigation-items/navigation-items.js';
const toolbar = (props) => {
return (
&l
浏览 2提问于2018-06-13得票数 7
回答已采纳
当我使用propTypes和条件渲染子对象时，我遇到一个错误。
错误：Warning: Failed prop type: The prop 'rate' is marked as required in 'Rate', but its value is 'undefined'
// index.js
import React, { Component } from "react";
import { render } from "react-dom";
import Rate from "./compon
浏览 60提问于2018-06-10得票数 1
回答已采纳
1回答
我正在用React.js创建一个音乐播放器应用程序，它由代表不同音乐流派的不同磁贴组成。下面是主App.js文件中的代码。
import React from "react";
import Genre from "./Genre.js";
import Row from "./Row.js";
//import genreData from "./genreData.js";
import "./styles.css";
function App() {
return (
<div class
浏览 2提问于2020-05-21得票数 0
我正忙于使用ReactJS和manged创建一个模式，以便启动和运行基本模式。我有两个分配给Modal组件的属性(show和handleClose)，并且我将函数与钩子一起使用。我的父文件App.js中有两个p标记(子标记)，如下所示：
<Modal show={mod} handleClose={hideModal} >
<p>Modal</p>
<p>Data</p>
</Modal>
我希望将p标记作为道具传递给我的Modal组件，就像我
浏览 1提问于2020-08-24得票数 0
3回答
本质上，我得到了一个不变的违规错误：
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports
浏览 2提问于2019-10-01得票数 2
回答已采纳
我是react.js的新手，并且一直面临着这个issue.Im在这个应用程序上工作的dish，用户点击一个dish，然后它以形式呈现，dish的card.The值作为道具从menucomponent传递到DishDetail，但在这样做的过程中，dish对象总是接收到空值，屏幕上没有任何东西。请帮助我将MenuComponents.js和DishDetail.js连接到it.im。MenuComponent.js是： import React, { Component } from 'react';
// import { Media } from 'reactstr
浏览 18提问于2020-09-08得票数 0
3回答
有点反应努比。所以，请不要评判我。
头部渲染得很完美，但我只需要加载.为了SearchBar!！
我甚至无法看到组件，因此我甚至无法处理表单提交等。
使用axios发出的GET请求在没有反应的情况下工作得很好。(就像我试图向邮递员发出GET请求时，端点可以正常工作。)
以下是我的组件：
App.js
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import
浏览 1提问于2019-08-19得票数 0
回答已采纳
我的盖茨比网站的header.js包含一个简单的导航标志和链接。如果About页面是活动的：
链接文本应从“约”改为“结束”。
链接网址应从"/about“改为"/”
请参阅下面的header.js代码：
import React, { useState } from "react"
import { Link } from "gatsby"
export default function Header() {
const [aboutLink, setAboutLink] = useState({
title: &
浏览 2提问于2021-02-18得票数 1
2回答
几天前，我开始学习React，并尝试显示一些简单的文本。我们的目标是让component button使用来自Hello的数据来输出文本hello world。但是，根本没有显示任何内容。 此React项目是使用create-react-app创建的 App.js文件： import React, { Component } from 'react';
class text extends Component {
render(){
return(
<div>
<Hello />
</div&
浏览 26提问于2019-06-21得票数 0
回答已采纳
在我的functional-component-based React本地应用程序中，我想在不同的屏幕之间导航，每个屏幕都驻留在一个单独的.js文件中。我希望能够像这样在多层深度导航：
Screen1.js <-> Screen2.js <-> Screen3.js <-> Screen4.js
出于某种原因，在中将所有屏幕放置在同一个App.js文件中，每个屏幕都作为自己的独立函数，我认为这是不寻常的开发人员行为。
我希望导航堆栈位于一个NavigationService.js文件中，然后由每个Screen#.js文件导入导航堆栈。我怎样才能实现这一点呢？
浏览 2提问于2021-08-24得票数 0
回答已采纳
2回答
访问存储在另一个组件Capacity.js中的App.js文件中的状态时遇到问题。
我遵循了官方的React文档将状态向上移动，因为我将在其他组件中使用它。
这是我的App.js文件：
import React, { Component } from 'react'
import Cylinders from './Cylinders'
import Capacity from './Capacity'
class App extends Component {
constructor(props) {
super(props);
浏览 31提问于2020-05-16得票数 0
回答已采纳
我有一个用于App.js的示例代码
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Child from './child';
class App extends Component {
render() {
return (
<div className="App">
<div className=
浏览 3提问于2017-05-29得票数 1
我有4个页面: App.js，HomeScreen.js，Login.js，Toolbar.js
带有StackNavigator的我的应用程序页面：
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Splash f
浏览 5提问于2018-01-11得票数 1
回答已采纳
我想将道具传递给我的嵌套组件，但是这里的问题是内部卡组件没有显示传递给它的数据，无论是内部文本道具还是内部pct道具。
这是我的index.js
const tst = () => {
return (
<div className="d-flex">
<Card text={"occupied"} pct={75} width={250}/>
<Card width={370}>
<InnerCard2 In
浏览 0提问于2021-12-24得票数 0
请告诉我为什么当我调用this.props.getOnEvents()时，会出现“getOnEvents()不是一个函数”的错误，这里有什么问题以及如何修复它？我正在查看console.log，在props中有这个函数，但当我尝试调用时，一个错误飞出，表明它不是一个函数
EventCalendar.js
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import EventCalendarTable from
浏览 7提问于2019-11-20得票数 0
回答已采纳
我一直在ReactJS中从学习路由。我还有一些问题来自本教程中给出的代码。
1-在此代码的App组件中，有一个名为“子”{this.props.children}的支柱值。但问题是，这个道具值是从哪里传递给这个App组件的？
2-在main.js文件中有browserHistory使用的<Router history = {browserHistory}>。问题是，为什么在那里使用/写？
组件：
import React from 'react';
import ReactDOM from 'react-dom';
import { Router,
浏览 1提问于2017-09-24得票数 0
我正在学习react.js功能组件，我使用的是useState()方法。这在返回[currentState, stateSetter]中给出了一个数组。现在，如果我们在一个事件中使用stateSetter()。我们知道事件的名称是不同的。那么它如何访问handleClick()函数呢？因为它不是在作用域中定义的？
import React, {useState} from 'react';
function App(props) {
const [name, setName] = useState("name1");
const handl
浏览 2提问于2020-11-27得票数 0
我正在做一个React项目。在该项目中，我尝试将用户详细信息保存在本地
存储。在这个场景中，在单击submit按钮之后，我必须显示加载器以便显示
加载器我安装了react- Loader -spinner所以谁能帮我展示五个加载器
单击提交按钮后的秒数。
这是Users.js
import React, { Component } from 'react';
import './Users.css';
import { Container, Row, Col, Button } from 'reactstrap';
import UsersMod
浏览 22提问于2020-05-06得票数 0
回答已采纳
我在react项目中有一个material-UI抽屉，问题是抽屉组件在组件本身中有页面内容。我解决了之前的一个问题，那就是在抽屉中使用react-router-dom进行路由。我想知道的是，我只想让抽屉在某些路线上显示出来，而不是全部。
我试图在折叠器组件中创建一些if语句，但找不到一个有效的语句。
Routes.js
const Routes = () => {
return (
<Fragment>
<Switch>
<Route exact path='/' component={Landing}
浏览 1提问于2019-09-17得票数 2
首先，我想说，我对此反应很新，然而，在网上搜索了这个问题的答案之后，遗憾的是，没有什么是完全合适的，所以我来到这里。
我有一个组件，它包含一个引导模式，然后我希望设置来自另一个子模型的值，并最终显示该模型。虽然我可以通过简单地在第二个子组件中声明模态子组件来解决这个问题，但是这会导致每个子组件的多个呈现(生成大量冗余的HTML代码)。因此，我希望在父级中声明模态组件，然后在其子组件被激活时以某种方式设置它的值(为了便于查看，我已经创建了一个基本版本)：
function DeleteModal(props)
{
return (
<div className=
浏览 2提问于2021-07-13得票数 1
回答已采纳
2回答
ProductTable.js
从“react”导入React，{ useEffect，useState }；
function ProductTable() {
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.d
浏览 7提问于2022-11-08得票数 0
1回答
我有一些困难，在使用风格的组件在一个反应应用程序(创建-反应-应用程序)，我也使用材料-用户界面。
我是一个关于样式组件的noobie，所以我尝试在一个基于另一个资料ui组件的样式组件内设计一个素材ui组件。为了澄清我想要做的事情，下面是代码：
const StyledContainer = styled(Container)`
background-color: ${props=>props.theme.defaultBackground};
${FormControl} {
width:100%;
}
`;
容器和For
浏览 8提问于2020-04-14得票数 0
回答已采纳
我是Reactive原住民的新成员，我坚持住了:)
我需要用正确的邮件和密码登录到主屏幕(Anaekran.js)。我从API获得邮件和密码信息。
当我按下按钮(MyButton)时，我希望代码检查邮件和密码，如果正确的话重定向到主屏幕(Anaekran.js)，但是什么都不会发生。我找不到问题。我真的很感激你能提供的任何帮助。我将无条件地回答你的答案和问题。
我使用路由器流量来导航过程。我不共享Anaekran.js，因为我认为我们现在不需要Anaekran.js。
有些方法，文件名是土耳其语。
这是LoginSayfasi.js (登录页面).
import React, {Compone
浏览 0提问于2020-01-02得票数 0
回答已采纳
2回答
我想显示一个狗的列表，上面有一个搜索栏，当输入搜索栏时，只会显示符合条件的狗。
我之前已经将数组存储在state中，一切工作正常。然而，现在，一旦启动并运行，我将在数组中有数千个条目，它将变得太混乱。因此，我决定希望以JSON格式存储我所有的对象，因为我相信这样会更容易管理。
我被卡住了，我试图将.json文件集成到旧格式中，但是我没有得到任何数据，当我在搜索栏中键入时，我得到了一个错误信息。
下面是我的json：
[
{
"id": 3,
"title": "Sir",
"content":"My name
浏览 15提问于2019-07-24得票数 3
回答已采纳
3回答
为什么没有呈现组件子组件？
、、、、
我用APP.js组件编写了以下代码：
import React from "react";
import Exam from "./exam.js";
export default function App() {
return (
<Exam>
<h1>hashemi</h1>
</Exam>
);
}
我用exam.js组件编写了以下代码：
import React from "react";
const Exam = ({child})
浏览 0提问于2020-04-17得票数 0
有两个组件，Header和Main。它们共享相同的上下文
const SearchTerm = React.createContext();
const [keywords, setKeywords] = useState("");
<SearchTerm.Provider value={{ keywords, setKeywords}}>
<Header />
<Main/>
在Header组件中，有一个搜索栏，每当它的值发生变化时，处理程序将通过setKeywords(event.target.va
浏览 0提问于2020-07-12得票数 1
回答已采纳
在我的应用程序中，我在组件App.js中有一个初始状态，它是一个对象数组
以下是App.js代码：
import React, { Component } from 'react';
import './App.css';
import { render } from '@testing-library/react';
// Import Used Components
import SearchBar from '../SearchBar/SearchBar';
import Playlist from '../Pl
浏览 2提问于2020-07-16得票数 0
回答已采纳
所以我创建了一个电影数据库应用程序，我想要在不同的类别之间切换，比如Top Rated，Popular等。我试图通过将状态设置为任何点击的文本值来实现这一点，稍后将使用该文本值来形成要获取的完整url。 这是我的代码： App.js import Movie from "./components/Movie";
import requests from "./components/ApiRequest";
import Navbar from "./components/Navbar";
function App() {
return
浏览 43提问于2021-11-20得票数 1
回答已采纳
1回答
我在一个auth.js文件中有一个handleLogin函数，我想检索在.catch中接收到的错误，并在我的Alert.js文件中传输它们，以便在Login.js中显示错误... 这是我在auth.js上的handleLogin函数 export const handleLogin = async ({ email, password }) => {
const user = await ooth.authenticate('local', 'login', {
username: email,
password: password,
}
浏览 10提问于2019-07-03得票数 0
我有使用axios.get调用的事件列表，并将它们映射到事件组件。在事件组件中，我有一个按钮，它打开一个注册组件。我试图找到一种在React组件上传递this.props.title的方法。
Events.js
import React from 'react';
import Event from './Event';
var axios = require('axios');
var Events = React.createClass({
getInitialState: function() {
return {
浏览 2提问于2016-12-09得票数 1
回答已采纳
我有一个用于更改react组件状态的函数，但我试图在另一个文件中传递该函数。我得到的错误是我试图传递的函数(changeView)没有定义。
这是App.js
export default class App extends Component {
constructor() {
super();
this.state = {
language: "english",
render: ''
}
}
changeView(view, e){
console.log(view);
this.
浏览 8提问于2018-08-17得票数 1
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回答
我试图根据一些按钮是否是“活动的”，以及是否使用鼠标悬停在它们上面。
它在某种程度上起作用，然而，它的行为方式，我并不完全理解。
如何根据组件的状态和用户行为将条件样式应用于组件？
我在这个中有一个例子
这里复制的主要JS文件如下：
demo.js
import React from "react";
import PropTypes from "prop-types";
//import { makeStyles } from "@material-ui/core/styles";
import { withStyles } from "
浏览 6提问于2020-04-28得票数 2
回答已采纳
我目前正在学习React，我正在尝试创建一个简单的模式，当页面加载时将显示。当我保存更改时，页面变为白色，控制台中没有任何错误。我将状态设置为true，然后尝试在渲染中调用它，认为这可能是一种方法。谁能告诉我我做错了什么？
Modal.js
import React from 'react';
class Modal extends React.Component{
constructor(props){
super(props)
this.state = {open:true}
}
render(){
浏览 0提问于2020-04-21得票数 1
1回答
我有：
import React from 'react';
import FilterButton from './FilterButton';
import FilterJobsScreen from '../../actions/jobs-screen/FilterJobsScreen';
export default class RightPanel extends React.Component {
constructor() {
super();
this.state = {
浏览 4提问于2016-04-19得票数 1
回答已采纳
2回答
我正在建立的克隆船网站，我想显示一个组件悬停的按钮。你可以看到船的原始网站
这是我将悬停并在悬停时显示内容的按钮。
<a href="#" className="link hover-1">
Shop
<Arrow />
</a>
它在header.js文件中
import React, { useState } from "react";
import styled from "styled-components";
import { AiOutlineS
浏览 7提问于2022-06-18得票数 0
回答已采纳
我是新的反应-本机，我正面临上述错误在我的代码。
我面临的错误是：
TypeError:未定义不是对象(计算'name.length')
此错误位于：
in ProductCard (created by ProductList)
in RCTView (created by View)
in View (created by ProductList)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapp
浏览 9提问于2022-03-20得票数 -2
我是新的，正在开发react js中的简单仪表板。 我的App.js文件是 <BrowserRouter>
<div>
<div>
<Switch>
<Route exact path="/" component={Login} />
<PublicRoute path="/login" component={Login} />
<Privat
浏览 26提问于2021-01-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
