无法将道具传递给JSX中的IIFE
。IIFE（Immediately Invoked Function Expression）是一种在定义后立即执行的 JavaScript 函数表达式。在 JSX 中，无法直接将道具（props）传递给 IIFE，因为 IIFE 是一个立即执行的函数，它不接受外部传入的参数。
然而，可以通过其他方式间接地将道具传递给 IIFE。一种常见的方式是在 IIFE 内部访问外部作用域中的变量，包括道具。例如，可以在 IIFE 内部使用闭包来访问道具：
const MyComponent = (props) => {
const propValue = props.propName;
(function(prop) {
// 在这里使用 propValue
console.log(prop);
})(propValue);
return <div>My Component</div>;
};在上面的例子中，我们将道具 propName 的值存储在 propValue 变量中，并将其作为参数传递给 IIFE。在 IIFE 内部，我们可以访问并使用 propValue。
需要注意的是，由于 IIFE 是立即执行的，它只会在组件渲染时执行一次。如果道具的值发生变化，IIFE 不会自动更新。如果需要在道具变化时重新执行逻辑，可以使用 useEffect 钩子或其他适当的方式来实现。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，无法给出相关链接。但腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以通过访问腾讯云官方网站获取更多信息。
相关·内容
使用react，在函数组件返回的JSX代码中，我可以拥有：
MyComponent.jsx
<MySubComponent props1={{a: 0, b:1}}/>
OR
<MySubComponent props2={["toto", "tata"]}/>
其中，我的子组件是通过回忆录导出的：
MySubComponent.jsx
export default React.memo(MySubComponent)
但是，这会破坏回忆化，因为格式为{.}或{.}的道具每次都会实例化一个新的对象/数组(值相同，但内存地址不同)，因此道具
浏览 2提问于2021-11-30得票数 1
当然，我正在尝试通过合并Foundation来完成"Todo“应用程序的示例。我有三个有问题的组件: TodoList.jsx、Todo.jsx和TodoModal.jsx。
我想要的是在todoList中显示在每个待办事项下面的链接，以弹出一个带有todo内容的模式。我的问题是:我可以启动Modal，但相同的Modal会弹出，不管我点击的是哪个要做的链接。似乎我无法更新TodoModal.jsx中的道具，并且可能是组件生命周期中的React，但我确实需要进一步的帮助。我刚上了一门在线反应课程，所以我还是新手。任何帮助都是非常感谢的！
下面是TodoList.jsx (向TodoMod
浏览 1提问于2016-06-22得票数 0
回答已采纳
我创建了一个名为Main的布局组件，它使用React.cloneElement(children, { user: 'First Name'})向其子组件发送用户支持，但无法将该用户支持传递给路由组件。
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Main from "./M
浏览 0提问于2018-08-04得票数 3
回答已采纳
我有一个父组件A，其中设置了state和useState。父程序有两个子组件--组件B (接收useState作为支柱)和组件C (接收state作为支柱)。
因此，如果B运行setState，那么C应该重新呈现.一切都很好。我遇到的问题是，B也在重新呈现，尽管它没有将state作为一个支柱。理想情况下，我只希望C重新呈现。
另外，我不想将以前的state与当前的state进行比较，因为如果它是一个具有大量数据的重嵌套数组或对象，那么性能就会受到很大的影响。
有办法做到这一点吗？还是我必须使用类似于上下文API的东西呢？
代码示例：
// App.jsx - A
const App = ()
浏览 3提问于2020-07-15得票数 0
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
有时，我在useCallback中声明一个咖喱函数时使用这种模式。
const Child = ({ handleClick }) => {
return (
<>
<button onClick={handleClick("foo")}>foo</button>
<button onClick={handleClick("lorem")}>lorem</button>
</>
);
};
export default function
浏览 2提问于2021-09-11得票数 5
回答已采纳
我现在正在做一个项目，我有App.jsx，还有我的其他组件inputComponent和articleComponent。App.jsx包含我的inputComponent和我的articleComponent。但是，我已经编写了在inputComponent中的fetch请求。 在这种情况下，我的articleComponent在很大程度上依赖于从fetch请求中检索到的数据，因此我想，一种可能的解决方案是将fetch从inputComponent转移到articleComponent。另一种方法是使用回调将数据从子组件传递到父组件。然而，根据我在这里和在线上读到的一些答案，这种从子组件向
浏览 33提问于2020-08-04得票数 0
回答已采纳
1回答
我有个问题。在我的Table.jsx中，我试图将selectedRows Id变量发送到编辑.jsx，以便在打开编辑模式时，输入字段已经存在。
Table.jsx
import React, { createContext, useEffect, useState } from 'react'
import { useMemo } from 'react'
import table from '../assets/json/mock.json'
import { useTable,useRowSelect, useSortBy, usePagi
浏览 3提问于2022-04-09得票数 -1
//vue SFC
<div>
<slot myProp="myProp"></slot>
</div> //vue jsx
<div>
{this.$slots.default}//myProp???
</div> 我在jsx中使用vue。如何在jsx中传输myProp到this.$slots.default？
浏览 33提问于2021-04-07得票数 0
回答已采纳
1回答
到目前为止，我对属性是如何通过参数从一个组件传递到另一个组件的知识范围如下
//开始:我的知识范围
假设在topic中存在一个名为A.jsx的状态变量。我想把它传递给B.jsx，所以我执行以下操作
B = require('./B.jsx')
getInitialState: function() {return {topic: "Weather"}}
<B params = {this.state.topic}>
在B.jsx中，我可以做类似的事情
module.exports = React.createClass({
render: funct
浏览 2提问于2015-10-02得票数 30
回答已采纳
1回答
我试图实现的目标：从嵌套元素中获取数据。
如何实现它：使用子元素的ref属性在父元素中获取该元素。无法工作，因为this.refs似乎只包含顶部组件中的refs，而不是嵌套组件。
SubmitStoryForm.jsx有嵌套组件TextInput.jsx，这是一个简单的<input />组件。
所以我的表单中有两个元素，SubmitStoryForm.jsx
<TextInput label="Story name" refer="titleInput" />
<textarea className="materialize
浏览 0提问于2016-05-17得票数 0
回答已采纳
1回答
我有两个组件
1)Job.jsx -parent 2)Jobmodel.jsx -child
所以我在job.jsx中有一个方法
const [joblist, SetJoblist] = useState([]);
const loadJobs = async () => {
const res = await fetch("http://localhost:8000/api/getJobs");
const data = await res.json();
const list = data.job;
浏览 3提问于2022-01-20得票数 0
回答已采纳
1回答
我正在学习React Js，但我将知道如何与这个库进行多个组件的通信。例如：
file1.jsx
class fileOne extends Component{
//get some value
//do something
//send value to file2
}
file2.jsx
class fileTwo extends Component{
//recive some value
//do something
//and return some value
//to file1
}
file3.jsx
class fileThree
浏览 0提问于2018-03-19得票数 0
回答已采纳
1回答
我无法重新设置我的redux表单，它被分割成3种不同的表单/页面。这是一个向导表单，我一直在尝试许多方法来重置它，但没有成功。
我一直在使用以下两个资源:如何构建向导表单：如何重置窗体：
然而，在我看来，这似乎是不可能做到的。
我有像这样的3页: WizardForm.jsx
<div className="wizard__form-wrapper">
{page === 1
&& (
<WizardFormOne
onSubmit={this.nextPage}
initialValues={initi
浏览 3提问于2020-10-22得票数 2
我熟悉JavaScript扩展语法：
obj1 = {x: 1, y: 2, z: 3 }
obj2 = {...obj1}
console.log(JSON.stringify(obj1) == JSON.stringify(obj2)) // true
在React的JSX语法中，我经常看到类似扩展语法的内容：
props = {x: 1, y: 2, z: 3}
<SomeComponent {...props} />
据我所知大致可以翻译成
SomeComponent({x: 1, y: 2: z: 3})
这本质上是道具钻探。但是，我也知道JSX允许在大括号中指定Java
浏览 14提问于2019-11-08得票数 1
回答已采纳
一个简单的Editor.jsx组件呈现方法，它呈现SVG元素和名为<SystemBox />的子组件。
render() {
return (
<svg id="editor">
<SystemBox />
</svg>
);
}
在SystemBox.jsx中，我需要访问actuall元素，例如访问SVG元素上的getScreenCTM()方法。
如何将父组件中对SVG元素的引用传递给子组件？
我想我可以在document.getElementById('editor')子组件中使用Syste
浏览 0提问于2018-08-24得票数 0
回答已采纳
2回答
在单击Item中的一个按钮后，我尝试预先填充表单--我有能够更新项目的操作，问题是能够用正确的项预先填充表单，以便能够分派该操作。
-----------------
| + List | << Name of the list
-----------------
| SKU: 12345 | << Item
| ITEM: Bananas |
| PRICE: $1.00 |
| |
| <edit> | << Button triggering the modal and for
浏览 6提问于2016-04-16得票数 0
回答已采纳
下面的示例与中记录的示例非常相似。假设我们有一个时钟组件，它被表示为函数(而不是类)：
//Clock.jsx
function Clock(props) {
setInterval(()=>{
// ??? how to trigger forceUpdate/render here???
}, 1000);
return (
<div>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
}
export de
浏览 0提问于2017-08-31得票数 1
我有3状态(状态，标题，舞蹈)
我用的是反应路由器，反应开关，React.cloneElement.
App.jsx
var React = require('react');
var io = require('socket.io-client');
var Router = require('react-router');
var RouteHandler = require('react-router').RouteHandlerl;
var Header = require(&
浏览 1提问于2018-08-25得票数 1
回答已采纳
1回答
通过修改给定的示例，我实现了一个即时搜索，在这个示例中，我可以通过引用我设置的状态变量来过滤任务。
如何通过修改订阅中的查询来做到这一点？
目前，订阅的方式如下：
export default createContainer( () => {
// Meteor.subscribe( 'Tasks' , '' );
Meteor.subscribe( 'Tasks' );
return {
tasks : Tasks.find({}).fetch(),
};
} , App );
浏览 0提问于2016-04-23得票数 0
回答已采纳
我试图使用TypeScript定义一个更高阶的组件，但我得到了奇怪的错误。 我试图通过react类型定义来理解这个问题，但是没有成功。 下面的代码是使用“create- react - app”-“create-react-app hoc --typescript”生成的react应用程序的一部分。 import React from 'react';
const wrapper = (ChildComponent:React.ComponentType) => {
const ComposedComponent:React.FC = ():JSX.Elemen
浏览 32提问于2019-10-09得票数 0
我是个新手。我看到很多帖子都是在更新父级的时候更新子级的，但我没有发现相反的情况。
我有一个父组件(MainComponent)来获取和存储数据。要添加数据的表单(FormNewSubItem )在一个子组件中。
当我提交表单时，我在一个项中添加了一个子项，并希望main component中的项数组存储新数据。
在MainComponent.jsx中
storeItems(items) {
// store items in db
}
retrieveItems() {
// return items from db
}
render {
return (
<M
浏览 12提问于2020-03-03得票数 1
我试图将一些道具从React类传递给我的函数组件，它是formik的，然后我想添加一些回调函数，以使这些数据返回到更改后的文本。但是我不确定我该怎么做。请检查我的以下代码： 这是我的Main.jsx类 // Some imports were removed to keep everything looks cleaner
import RegisterAccount from "RegisterAccount.jsx";
class Main extends React.Compoenent {
constructor(props) {
s
浏览 14提问于2019-06-13得票数 1
回答已采纳
1回答
我正在从此Link中提到的路由发送React组件 <Route path='/StartCompaign' render={(props) => <CampaignStart {...props} isDashboard={true} /> } /> 我在另一个组件中得到了支持，比如 {props.childern.render.isDashboard ? <Header /> : "NO" } APP.JSX文件 import React from 'react';
import { Route,
浏览 11提问于2019-04-15得票数 0
回答已采纳
1回答
目前，我正试图制作一个主题与样式-组件和样式-系统。我用我需要的所有样式(theme.js)创建了一个主题，一个带有样式组件和变体的button.jsx。
在我的theme.js是颜色和有一个模式(黑暗)与颜色。
//default
500: "#139ebe",
//modes
modes: {
dark: {
blues: {
500: "white"
}
}
}
它们将被合并到一个主题对象中。
const getTheme = mode =>
merge({}, theme, {
colors: ge
浏览 4提问于2019-10-16得票数 1
回答已采纳
2回答
我刚刚开始使用es6学习Meteor和React，而且我很难理解this.props。它是从哪里来的？我没有自己为类定义它的代码。提前谢谢你。
这是我的简单代码的一部分-todos/import/ui/App.jsx：
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import ReactDOM from 'react-dom';
import { Tasks } f
浏览 5提问于2016-05-19得票数 1
回答已采纳
1回答
我有一些以JSX数组为道具的代码。该组件应该确保所有JSX都按照它们在数组中出现的顺序呈现。为了做到这一点，我的所有组件都有一个可选的onLoad函数，它们可以作为道具。当我最初在父组件中创建JSX数组时，没有添加这个函数，因此我不必在所有这些不同的父类中编写相同的函数。因此，我将它们传递给处理加载顺序的组件，但它需要一种方法将onLoad属性添加到数组中的所有内容。
我尝试在数组中进行映射，并在每个元素上使用child.setAttribute，但得到错误：setAttribute is not a function
我还尝试了导致错误的child.onLoad = this.childDi
浏览 10提问于2019-08-13得票数 2
回答已采纳
1回答
我在访问使用react-router的render方法呈现的有状态组件中的url参数时遇到问题。我已经读到，如果我想通过react-router将道具传递到一个组件中，最好的方法是使用render函数。 下面是我的带有Link和Route的App组件 import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import StatefulComponent
浏览 9提问于2019-07-04得票数 0
2回答
我正在使用Formik构建一个用户输入表单。我正在使用withFormik处理我的表单。我目前在我的组件中传递我的handleSubmit，如下所示： export const CreateForm = withFormik({
mapPropsToValues: () => ({
primarySkill: "12"
}),
validationSchema: () => FormSchema,
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() =&g
浏览 17提问于2019-06-24得票数 2
回答已采纳
1回答
import { IoLogOutOutline } from 'react-icons/io5';
import { IconType } from 'react-icons';
如何使用导入类型的“图标类型”？
(alias) type IconType = (props: IconBaseProps) => JSX.Element
当将图标的类型设置为JSX.Element时，我可以传递一个图标作为道具。
type LinkProps = {
to: string;
icon?: JSX.Element;
};
<Li
浏览 9提问于2022-09-10得票数 0
3回答
在一个教程中，我看到了以下代码：
import React from 'react';
const withClass = (WrappedComponent, className) => {
return (props) => (
<div className={className}>
<WrappedComponent {...props}/>
</div>
);
}
export default withClass;
现在我知道代码是做什么的，但是我
浏览 1提问于2018-07-23得票数 0
回答已采纳
**
TypeError:无法读取未定义的属性“getState”，我找不到一个solution.would，您看我的代码?您认为解决方案应该是什么？**
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore} from 'redux';
import rootReducer from
浏览 2提问于2020-02-09得票数 1
回答已采纳
2回答
我试图在import中使用包，但是源文件使用了一个，它期望将window作用域作为参数传递。
导入包并将正确的参数传入IIFE的正确的IIFE语法是什么？
注意：import { mule_upload } from 'mule-uploader的问题不在于代码不存在或正在执行。问题是在运行scope时没有传递正确的namespace或IIFE。
App.jsx
import { mule_upload } from 'mule-uploader'
// this runs the mule-uploader file with the IIFE
// since `t
浏览 1提问于2017-11-10得票数 2
昨天，我正在阅读有关高阶组件的React文档，并试图使用其中的一些示例。但是，对我来说，这不管用。
这里是我创建的一个简单的临时项目，它只是为了包装另一个组件，看看它是如何工作的。但从一开始它就没起作用。
import React, { Component } from 'react';
export default function (enhacedComponent) {
class Authenticate extends Component {
constructor(props) {
super(props);
}
render
浏览 1提问于2017-03-04得票数 2
回答已采纳
我有这个组件(至少，我认为它被称为“组件”！)：
const Todo = ({todo, todoList, remove}) => {
let status = todo.opened ? 'opened' : 'closed';
return (
<li className={"todo " + status} data-endpoint={todo['@id']}>
<form onChange={this.changeStatus}>
浏览 3提问于2017-10-30得票数 1
回答已采纳
1回答
我正在尝试弄清楚如何将状态更改通知另一个组件。假设我有3个组件-- App.jsx、Header.jsx和SidebarPush.jsx，我所要做的就是用onClick切换一个类。
因此，当单击Header.jsx文件时，将有两个按钮将状态切换为true或false。另外两个组件App.jsx和Header.jsx需要知道这些状态更改，以便它们可以在这些状态更改时切换类。
App.jsx
import React from 'react';
import Header from 'Header';
import classNames from "clas
浏览 1提问于2016-08-01得票数 58
回答已采纳
在JSX中使用spread与诸如props这样的对象进行交互，似乎没有输出我所期望的结果。
<Text {...this.props} />
它似乎被呈现到style="foo"中，在那里它应该是style:"foo"作为。我在任何地方都找不到这份文件。我对react完全陌生，我正在尝试理解语法，并想知道react是否在内部做了一些没有文档的事情。
一个简单的测试突出了我的困惑：
const x = {...{test:1}}.test;
alert(x);
警醒
1
这肯定不会编译：
<Text test: 1 />
浏览 0提问于2018-10-27得票数 2
回答已采纳
对于这个基本问题，我事先很抱歉，我不是一个强大的前端开发者，我已经浏览过互联网。当我用铬检查我的前端应用程序时，我一直收到这个错误。
(3)资料-UI:提供给ButtonBase的ButtonBase支柱无效。请确保子组件在此自定义组件中呈现。
为什么社交按钮标签会抛出这个错误？
这是密码..。
import React, {forwardRef} from 'react';
import '../../styles/header.css';
import {Link, useLocation} from 'react-router-dom
浏览 0提问于2021-05-22得票数 3
回答已采纳
我希望将jsx作为对象中键的值传递。这就是我要做的：
const getRightDiv = () => {
return (
<div>This is what I want to pass</div>
);
}
var card = {
title: "haha",
subtitle: "yes",
div: getRightDiv()
}
//In my Child Component
return (
<div>
{ card.t
浏览 12提问于2022-04-01得票数 1
1回答
在对不同文件的响应中更改值
、、、、
所以我有这个react文件结构
app/
|- assets/
| |-pages/
| | |-desktop.jsx
| | |-mobile.jsx
| |-components.jsx
|-index.jsx
在index.jsx中，我需要desktop.jsx In desktop.jsx，我需要components.jsx，但是components.jsx中有一部分需要在index.jsx类中更改状态。
所以是这样的：
index.jsx -> desktop.jsx -> components.jsx
那么如何用inde
浏览 2提问于2017-11-30得票数 0
回答已采纳
5回答
在组件之间传递数据时出错
、、、
我试图将一个值从一个组件-- Counters.jsx传递给Counter.jsx。当我转到开发人员控制台并执行日志时，我可以从: this.props.value获取数据，但当我尝试将其设置为状态时，我得到以下错误: TypeError: Cannot read property 'value‘of undefined。
// This is the component: Counters
import React, { Component } from "react";
import Counter from "./counter";
class
浏览 0提问于2019-06-26得票数 1
我有一个组件，称为child.jsx，其中有一个按钮，它在单击按钮时触发在同一组件中定义的函数(名为：handleClick)。
现在，我将它导入到两个组件中，比如parent1.jsx和parent2.jsx。
我现在想要的是，只有在单击handleClick组件下的按钮时才调用parent1.jsx函数，而不是在parent2.jsx中。
谁能帮上忙解决这个问题？
浏览 2提问于2021-11-27得票数 1
回答已采纳
1回答
ref状态为空。
、、、
我想通过使用ref来访问子组件的状态，但是ref的状态始终是空的。
在我的React应用程序中，我有一个Editor(基本上，它是一个表单)，它操纵自己的状态，例如值的变化、更新。编辑器用于多个页面。
Editor.jsx
export default class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
value1: null,
..
浏览 2提问于2020-03-30得票数 1
回答已采纳
2回答
在Results组件中嵌入Navbar页面组件是一种糟糕的做法，因为它中有搜索栏，而且我可以将输入值作为Navbar组件的支柱传递给JSX中的Results组件吗？但是，这是一个很好的实践，因为我包括一个主要组成部分的海军？目前，我正在使用路由器，useNavigation，useParams，方法来检测变化，但是它带来了不必要的复杂性。
浏览 6提问于2022-02-14得票数 0
回答已采纳
1回答
下面的代码将在JavaScript中愉快地工作。我使用的是React+TypeScript，因此这是一个JSX文件：
呼叫组件：
<FiltersPanel onFiltersChanged={() => { console.log('I was called') }} />
内部组成部分：
const FiltersPanel = (onFiltersChanged) => {
const handleFiltersChange = () => {
onFiltersChanged(); /* I am getting
浏览 0提问于2019-08-27得票数 0
回答已采纳
我有一个父组件，它将通过运行一个在每个元素上都有数组的数组来创建子组件。在每个元素中，我将图像的路径放在一个名为logo的变量中，如下所示：
```jsx
Premio : [
{key:11, name:'EMPTY', premio:0, logo:ruta1, special:"EMPTY"},
{key:12, name:'BONUS', premio:1, logo:ruta2, special:"BONUS"},
这是在我的一般情况下驱动Redux的，到目前为止还好
我的组件在打印奖品的
浏览 0提问于2019-05-25得票数 2
我试着去了解什么是最好的方式来使用道具来回应
假设我有一个使用import {FormattedMessage} from 'react-intl'的容器
假设我在容器的JSX中使用了一个组件。
现在，如果我也想在组件中使用FormattedMessage，应该在组件中再次使用导入吗？或者我应该通过容器将FormattedMessage作为支柱发送到组件中？
示例：
import {FormattedMessage} from 'react-intl';
class Container {
render() {
return (
浏览 3提问于2017-11-13得票数 3
在我的一个组件(Source.jsx)中有一个返回数组的方法。我想在我的所有其他组件中访问这个数组(比如Article.jsx，它不一定是Source的子组件)。这个是可能的吗？
//Soure.jsx
export default class Source extends React.Component {
//Returns an array which I want to use in Article.jsx
getCategories() {
let sourceCategories = this.fetchAllCategories();
let sort
浏览 0提问于2017-05-26得票数 0
我正在使用react-rails gem来集成react和rails，我对如何组织我的代码感到矛盾。
核心html是在html.erb文件中还是在jsx文件中更可取？目前，我基本上把所有的东西都做成了组件。我在html.erb文件中所做的就是使用react_component帮助器调用这些组件。例如，我的个人资料页面有一个ProfileShow.js.jsx文件，编辑帖子页面有一个EditPost.js.jsx。
你有什么建议吗？
浏览 2提问于2015-10-05得票数 5
React.cloneElement()总是要求第一个参数作为react组件，它应该作为道具中的子元素传递。
是否有方法将简单的HTML节点作为子节点传递。为了更好地理解我的问题，请参考下面的代码：
Dialog.jsx (公共组件)：
return (
<div className="app-dialog-jsx" ref={(ele) => this.ele = ele}>
{this.state.show && React.cloneElement(this.props.child
浏览 2提问于2018-02-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
