Reactjs将函数props传递给组件<div>标记上prop `addrow`的值无效。或者将其从元素中移除
React是一个流行的JavaScript库，用于构建用户界面。React通过组件化的方式来构建UI，每个组件都是可重用的独立单元。
在React中，组件之间通过props传递数据和方法。props是一个组件接收的参数对象，包含组件需要的数据和方法。通过props，父组件可以向子组件传递数据或者回调函数。
根据给出的问答内容，问题是在使用React中将函数props传递给组件时，div标记上的prop addrow的值无效，或者需要将其从元素中移除。
首先，需要确保函数props正确地传递给了组件。在React中，可以通过以下方式将函数props传递给组件：
<ComponentName addrow={functionName} />上述代码中，ComponentName是你要传递函数props的组件名，addrow是组件接收函数props的属性名，functionName是要传递的函数名。
如果你已经按照上述方式正确地传递了函数props，但是发现在使用<div>标记时，prop addrow的值无效，可能有以下几个原因：
- 组件未正确地接收和使用函数props：确保组件内部正确接收和使用了函数props。你可以在组件的函数体或生命周期方法中使用
this.props.addrow来调用传递的函数。 <div>标记不是组件：如果你将函数props传递给了<div>标记，而不是一个React组件，那么函数props将不会生效。确保将函数props传递给的是一个React组件。- 组件中的
addrowprop未正确定义：确保在接收函数props的组件中，定义了正确的prop名为addrow，并且在组件内部正确地使用了它。
总结起来，要解决这个问题，你可以按照以下步骤进行排查：
- 确保函数props正确传递给了组件。
- 确保组件正确地接收和使用了函数props。
- 确保将函数props传递给的是一个React组件。
- 确保组件中正确定义了prop名为
addrow，并在组件内部正确地使用了它。
对于React的更多信息和学习资源，你可以参考腾讯云的React相关产品和文档：
希望以上信息能对你有所帮助！如果还有其他问题，欢迎继续提问。
相关·内容
我试图将一个函数传递给一个组件，但我遇到了以下问题： "Reactjs将函数props传递给组件时，标记上的prop addrow的值无效。请将其从元素中删除，或者传递字符串或数字值以将其保留在DOM中。“ 代码： constructor(props) {
super(props);
this.props = props;
this.addRows = this.addRows.bind(this);
}
addRows() {
console.log("AddRows")
}
<CreateQrModal
show={
浏览 12提问于2019-06-19得票数 0
PropTypes无效(忽略！)这个简单的组件，我尝试了所有的方法，但它不起作用。
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import Item from "./Item";
import chunkArray from "../../utils/chunkArray";
const AllItems = (props) => {
const { items, title }
浏览 2提问于2021-07-08得票数 2
1回答
我想知道如何创建动态行与datepicker作为一个字段的按钮点击。需要在按钮点击时动态创建行，行在点击时生成。但是Datepicker不工作。但我需要添加一个字段作为Datepicker如何在reactjs中完成 我有DynamicTable组件，它创建带有字段的行，在主页中使用 import DynamicTable from "./../../../components/DynamicTable";
import DatePicker from "react-date-picker";
class Home exends React.PureCompo
浏览 8提问于2020-01-29得票数 0
2回答
有没有办法实现方法参数的解构，也可以得到方法参数。
在具有无状态组件的React应用程序的上下文中，我希望能够替换
const MyComponent = (props) => {
const {prop1, prop2} = props;
return (
<div className={prop1 + '-' + prop2}>
<Child {...props}/>
</div>
)
}
使用更简洁的语法，比如
const MyComponent = (props: {prop1, pro
浏览 0提问于2016-11-25得票数 10
我创建了一个存储库，用于在不同客户端之间共享响应组件。
共享组件如下所示：
import React from "react";
import { useTranslation } from "react-i18next";
import IconProjects from "../Icons/Icon_Projects";
interface Props {
links: {
[key: string]: Link;
};
}
interface Link {
name: string;
url: string;
浏览 4提问于2020-06-08得票数 0
回答已采纳
给定一个简单的组件来呈现其子组件：
class ContainerComponent extends Component {
static propTypes = {
children: PropTypes.object.isRequired,
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default ContainerComponent;
问题:孩子们的propType应该是什么？
当我
浏览 10提问于2017-02-08得票数 384
回答已采纳
我有一个行组件，我将其导入到我的App.js组件中，显然我能够向行添加新的项，但是删除功能似乎不起作用。我正在通过索引和拼接，但我不知道我做错了什么。有人能告诉我哪里出了问题吗？
我的App.js或根组件看起来如下：-
import React, {Component} from 'react';
import './App.css';
import Row from './Row.js'
class App extends Component {
state = {
rows: [
{value: '
浏览 0提问于2020-01-27得票数 2
回答已采纳
2回答
码箱链接
我正在创建一个应用程序，用户可以单击Add Timer按钮来创建数量有限的自定义倒计时/倒计时器，定义在组件CustomTimerRow中。每一行都有一个图标，如果他们点击它，它将删除计时器。
我有以下父组件，它包含行列表：
import React, { Component } from 'react';
import {connect} from 'react-redux';
import CustomTimerRow from './CustomTimerRow';
import AddRow from './AddRow
浏览 0提问于2018-09-03得票数 2
回答已采纳
我有下一个组件：
class UserDetail extends Component {
render() {
if (!this.props.user) {
return (<div></div>);
}
return (
<div>
<div>{this.props.user.first} {this.props.user.last}</div>
<
浏览 3提问于2017-04-30得票数 2
回答已采纳
1回答
我有这些部件。我想把每一个<House/>变成一个动态的url。例如，在浏览器中访问http://localhost:3000/houses/house/1时，我想要显示House 1。
应用程序中的其他东西运行良好。我只想解决这个实现动态路线的问题。
路由器组件
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import App from './App'
import
浏览 1提问于2019-06-25得票数 0
回答已采纳
我是ReactJS的新手。当我单击该按钮时，调用将从createTablesam.js转到index.js以更新对象。对象已在setState中成功更新，但未在UI中更新。如果我再次点击按钮，对象正在更新，但UI没有更新。
const PureComponent = React.PureComponent;
class Index extends PureComponent {
constructor() {
super();
this.state = {
userValues: [
{
name: "Mani&
浏览 2提问于2019-11-26得票数 1
我在ReactJS中练习，在两个同级组件之间传递方法时遇到了问题。我已经创建了React应用程序，它有3个组件：MainPage是父组件，FirstPage和SecondPage是两个子组件。在FirstPage组件中有一个包含一些文本的标题，而SecondPage组件中有一个按钮。我的主要目标是通过MainPage组件将我在FirstPage中定义的change-header方法传递给SecondPage组件，这样当我单击按钮时，该事件方法就会被触发。
我按照这个教程来构建我的应用程序。我还在MainPage中使用react-router-dom显示两个页面:一个用于FirstPage，另一
浏览 0提问于2019-07-18得票数 0
class Widget extends React.Component {
constructor(props) {
super(props);
}
render() {
return <p>Hi</p>;
}
}
效果很好。万岁！但是这个(#2)..。
class Widget extends React.Component {
constructor(props) {
super(props);
}
getElement() {
return <p>Hi</p>
}
浏览 3提问于2020-08-12得票数 0
回答已采纳
我有一个显示/隐藏功能，我正在为一个组件构建，我想知道我如何能够将一个字符串的长度从5个字符切换到它的完整长度和返回，基于按钮单击和先前的状态。我有按钮单击和一个布尔表示一个真/假状态，但我不知道我如何能够切换之间的5个字符限制和全长。我只能得到扩展的文本，而不是原始的状态。
基于状态布尔(showFullText)，我想到了这个解决方案：
if (this.state.showFullText == false){
partialText = this.props.discovery.slice(0, this.state.characterLimit);
浏览 0提问于2018-12-26得票数 0
2回答
? 我有两个带有ReactJS和SemanticUI的按钮。单击每个按钮时，背景颜色都会发生变化。我希望一次只激活一个按钮，这意味着如果单击红色的按钮，绿色的按钮将停用，反之亦然，取回默认的白色背景颜色。现在，这两个都可以用颜色变化同时点击。 下面是我的组件： export class BoutonRefus extends Component {
constructor(props) {
super(props);
this.state = {
button: true
};
this.handleClick = this.handl
浏览 42提问于2020-01-18得票数 1
回答已采纳
我的应用程序包装在一个组件中，它呈现页眉、页脚和任何路由子组件。
我试图在<Header />时用</HeaderAdmin/>替换/admin组件。
路由
<Route path='/' component={SiteWrapper} >
<IndexRoute component={Home} />
<Route path="admin" component={Admin}>
<Route path="dashboard" component={Dashboar
浏览 2提问于2017-04-01得票数 0
回答已采纳
3回答
这不是在组件上触发，但是当我将事件处理程序附加到div时，它可以工作。是否需要在子组件中传递道具类型函数？
const buttonStyle = {
color: 'red'
};
class Button extends React.Component {
render() {
return (
<a className="social-button twitter">
<i href="#" className="fa fa-twitter&
浏览 5提问于2017-11-17得票数 1
回答已采纳
我在使用原型
错误“map”在道具验证、反应/道具类型中缺失。
我应该如何验证这个映射？
import React, { Fragment } from 'react'
import PropTypes from 'prop-types';
const ListComponent = props => {
if (!props) return null
return (
<Fragment>
{props.map((item,i) => <div key={i}>
浏览 2提问于2019-01-11得票数 4
回答已采纳
ReactJS n00b，试图在ReactJS中构建一个简单的、可重用的< select >组件，并使用onClick回调。我没有收到任何控制台或webpack错误，但是当我更改所选选项时，不会发生任何事情。
Caster.js
import React from 'react';
import ReactDOM from 'react-dom';
import { SelectSchool } from './SelectSchool';
import { Button } from './Button';
exp
浏览 1提问于2017-08-25得票数 1
我正在尝试删除通过add按钮生成的多个div。我在理解如何将父div的id发送到从子div传递的删除方法中遇到问题。另外，如果我可以将div的id存储到一个状态来执行删除过程。我的代码如下所示。感谢您的输入和建议。
constructor(props) {
super(props);
this.state = {
names: [],
inputValue: '',
id: [],
count: 1,
hostname: '',
devname: '',
浏览 0提问于2019-11-20得票数 0
我正在尝试更改state和URL onChange在<Input type='select'>上。(我用的是反应带)
import React, {Component} from 'react'
import {
Input,
} from 'reactstrap'
export default class NewPostComponent extends Component {
constructor(props) {
super(props)
this.state = {
浏览 0提问于2018-07-14得票数 5
回答已采纳
我正在练习React native。当我编译下面的程序时，我得到了无法读取Details.js未定义错误的属性'props‘。请告诉我这里出了什么问题。
Layout.js
import React, {Component} from 'react';
import Header from './Header';
import Details from './Details';
export default class Layout extends React.Component {
constructor(props){
supe
浏览 0提问于2017-03-31得票数 1
回答已采纳
正如标题所说，我正在尝试从子组件调用放置在父组件中的方法(componentDidMount) -我的应用程序中有以下组件结构：
export default class Today extends Component {
constructor(props) {
super(props);
this.state = {
stats: [],
loading: true
};
}
componentDidMount() {
axios.get(api_url
浏览 126提问于2018-07-31得票数 1
回答已采纳
1回答
我最近开始学习ReactJs，我需要一些帮助。我已经在我的项目中创建了两个组件。第一个是MainComponent，如下所示： constructor(props) {
super(props);
this.onDishSelect = this.onDishSelect.bind(this);
this.state = {
dishes: DISHES,
selectedDish: null
};
}
onDishSelect(dishId) {
this.setState({ selectedDish: di
浏览 18提问于2019-12-09得票数 0
我想知道直接使用状态渲染组件和使用道具渲染组件的区别。
getInitialState:
data: this.props.data
以下代码用于render函数
1.
data = this.state.data
return (<Component data={data} />)
2.
return (<Component data={this.state.data} />)
3.
return (<Component data={this.props.data} />)
当我在侦听回流操作上使用setState时，前两种情况会崩溃。如果任何人有
浏览 0提问于2015-05-27得票数 3
1回答
在一个组件中，为什么不能接收来自不同组件的两个/多个道具？
我得到了一个错误：
TypeError: props.name不是一个函数。
我做错了什么？
我就是这么做的-
function Welcome() {
const [searchString, setString] = useState('');
return (
<div className='App'>
<Header name={searchString} />
</div>
);
}
function Home(
浏览 4提问于2021-07-08得票数 1
我的状态变量中有一个HTML标记值，如下所示 this.state = {
value: '<p>This is a paragraph</p>'
} 我想在我的子组件中显示这个HTML内容。我试着像这样做 <Childcomponent value={this.state.value} /> 这样我就可以使用props访问子组件中的值。我的子组件是 render() {
return(
<div>{this.props.value}</div>
)
} 但这会产生一些错误。我
浏览 14提问于2019-03-21得票数 1
有时，我希望将我的条件呈现从render()中移开，并且我总是在这两种方法之间陷入两难境地：
class MyComponent extends React.Component {
_renderSomething() => {
const {x, y, z} = this.props
// conditional rendering based on props
}
render() {
return (
{ this._renderSomething }
// vs
{ renderSomething(this
浏览 2提问于2017-09-29得票数 2
回答已采纳
2回答
ReactJS:转移道具
、、、
我正在ReactJS中开发一个实时仪表板应用程序来监视传感器。我使用AutobahnJS +来流数据。
这是组件视图中我的仪表板的抽象。
Main.jsx:
class Main extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
$(document).foundation();
var that = this;
var conn = new ab.Session('ws://xx.xxx.xxx.xx', function
浏览 1提问于2016-08-05得票数 2
2回答
ReactJs排序方法
、、、
我在自己的react应用程序中有一个表，它从API中获取数据。
我想对其中一个栏目进行排序。a[obj1][obj2]或b[obj1][obj2]通常是一个数字串，有时等于"-"，(Dash)，这是我的排序函数：
if (order === "DEF") {
const sorted = props.currency.sort((a, b) =>
Number(a[obj1][obj2]) > Number(b[obj1][obj2])
? 1
: Number(b[obj1][obj2]) > Number
浏览 4提问于2022-02-12得票数 -1
我是reactjs的新手，我的目标是建立保护路由，并通过链接，但在我的代码中，我在本地得到了一个错误，如状态未定义。我不知道我做错了什么。
export const PrivateRoute = ({ component: Component, loggedIn, path, ...rest }) => (
<Route
path={path}
{...rest} render={props => {
// authorised so return component
return loggedIn ? (<Componen
浏览 14提问于2020-05-12得票数 0
我看过其他类似的问题但似乎找不到答案..。
我搞错了：
警告:错误的道具类型:螺旋桨height在AudioPlayer中被标记为必需的，但它的值是undefined。
当尝试以下代码时：
import React, { Component } from "react";
import { Row, Col } from "react-bootstrap";
import Audio from "react-audioplayer";
import "./../../Assets/Css/AudioPlayer.css";
浏览 2提问于2017-09-09得票数 2
回答已采纳
我有一个简单的reactjs网站托管在GitHub页面上。它列出了文章，类似于reddit中的feed。我有一个AddArticle的要求，其中，在点击页面底部的‘添加文章’按钮，包含此按钮的分区必须成为隐藏，并为添加文章的详细信息(包含2个文本框和一个名为‘提交’的按钮)必须显示新的分区。单击“提交”按钮后，先前的Div必须重新出现，并隐藏新的Div。
以下是我目前使用的代码(这是不完整的)。请仔细阅读并提供对该问题的任何见解。谢谢。
class Child extends React.Component {
constructor(props) {
super(props)
浏览 0提问于2018-02-17得票数 0
2回答
举个例子(真正尝试过的代码)，我有一个组件，我想启动一个新的呈现实例。
import React, { Component } from 'react';
export default class TinyObject extends Component {
constructor(props) {
super(props);
console.log("TinyObject constructor");
}
render() {
console.log("Tiny
浏览 0提问于2017-07-14得票数 6
回答已采纳
这是我使用react redux promise中间件的Dashboard.js。从facebook获取数据，然后将其传递给dispatch。我想问为什么我在this.props.brandsInformation上得到空值？
有没有办法访问componentDidMount函数()中的数据？
任何帮助都会非常感谢，这对我来说似乎是一个障碍。
/* global FB */
import React from 'react';
import { cyan600, pink600, purple600, orange600 } from 'material-ui
浏览 0提问于2017-10-11得票数 0
我想知道做这件事最好的方法是什么。
我有3个组件，App，String和Note。在我像这样在App中创建Note元素之前：
<Note
state={this.state.btnStates[i]}
onClick={() => this.handleClick(i)}
/>
而且它的工作方式很有魅力(handleClick当然是最父的组件--应用程序)
但是现在我想把创建笔记转移到String组件，我认为这会很容易，但我认为工作起来并不容易。我这样做:在App组件中，我呈现String：
<
浏览 0提问于2019-12-08得票数 0
我正在尝试创建一个简单的身份验证，但在显示内容方面有一些问题。在componentDidMount中，我获得有关с当前用户的信息，然后将其传递到头部，在if语句中确定状态为“页面”。使用"changePage“，我在登录或注销后更改此状态。但是我在标题中的if语句不能正常工作:登录后显示注销，但刷新页面后显示登录，尽管存在this.props.currentUser
编辑:添加了一些带有"this.props.currentUser“的console.log，当我登录时：头:23在ComponentDidMount中，所以在从Main传递我的currentUser时有一些问题
浏览 0提问于2020-10-26得票数 0
孩子如何才能访问其父母的道具？例如,
父组件- footer.jsx：
import React from 'react';
import $ from 'jquery';
import NavItem from './nav-item';
class Footer extends React.Component
{
constructor(props) {
super(props);
this.state = {
publicUrl: null,
cur
浏览 3提问于2016-11-04得票数 8
回答已采纳
因此，我有一个组件，它将渲染我的卡片，称为CardListing，如下所示； return getWalletPayment.map(payment => (
<CardListing
key={payment._id}
card={payment.card}
cardNo={payment.cardNo}
onChanged={selected => {
this.setState({ selectedCard: selected });
}}
/>
)); 现在，它将呈现两张卡片。如果我选择一个，一切都很
浏览 18提问于2019-02-03得票数 2
回答已采纳
该组件的render方法确实使用了提供给该组件的任何属性。
当道具改变时，组件会重新渲染吗？
class MyComponent extends React.Component {
constructor(props) {
super(props);
const { propValue } = props;
// do something with propValue...
}
render () {
return (
<div>foo</div>
);
}
}
浏览 0提问于2017-08-16得票数 4
Layout.js
import React, {Component} from "react"
import Aircraft from "./Aircraft"
class Layout extends Component {
constructor(props) {
super(props)
this.state = {
test: true,
acn: ""
}
}
WhatIsAircraftName = (acn
浏览 3提问于2019-09-28得票数 1
回答已采纳
2回答
具有一个包含的组件MyComp，并希望测试MyComp以确保处理程序是正确的并且可以被调用
class MyComp extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(value) {
this.props.doSomething();
}
render() {
return (
浏览 0提问于2018-05-28得票数 7
我正在使用functions构建一个ReactJS项目，当我导航到另一个页面时，将props的值设置为状态，但之后当我单击用于记录这些变量的按钮时，会将这些变量记录为空。 import React, { memo, useState, useEffect } from 'react';
import { axios } from '../constants/axios';
import { Table, Button } from 'antd'
import { baseUrl } from '../constants';
c
浏览 18提问于2020-07-22得票数 0
回答已采纳
例如，当每个项都有自定义图标组件并在属性上设置它时，请使用list组件。但是，如何将类名添加到变量中呢？：
const items = [
{ name: "Example", icon: <Foo /> }
];
return (
<ListItems items={items} />
)
现在，从ListItems组件中，如何向图标对象添加类名？
return (
<div>
{items.map((prop, key) => {
{prop.icon}
浏览 3提问于2020-07-15得票数 1
回答已采纳
我有一个表格，里面有几个问题。有些问题有一套子问题。这些代码使用以下代码呈现。
{
Object.keys(this.props.moduleDetails.questions).map((questionInfo, index) => (
<div key={index}>
<QuestionAnswers
questionInfo={this.props.moduleDetails.questions[questionInfo]}
generateStepData={this.props.generat
浏览 1提问于2018-07-05得票数 5
回答已采纳
让我开始说，我知道setState是异步的，这不是我遇到的问题(我猜)！
我有一个表，并将每一行存储在定义为：
const [rows, setRows] = useState([]);
我将表呈现为：
rows.map(r => {
if(r.prop == 1) {
return (
<div key={r.position} onClick={e => AddRow(r.position)}>{r.label} </div>
)
}
})
AddRow函数只是在指定的索引(r.position)处添
浏览 1提问于2021-05-26得票数 1
回答已采纳
我有一个静态聊天机器人，可以通过以下方式显示消息：
<ChatMessage bot={true}>Hi.</ChatMessage>
像这个img：
const ChatBot = () => {
return (
<Styled.ChatBox>
<ChatMessage bot={true}>Hi.</ChatMessage>
<ChatMessage bot={false}>Hello.</ChatMessage>
</Styled.
浏览 3提问于2020-01-30得票数 1
3回答
我在我的reactjs应用程序中使用了受保护的路由，我想知道如何在受保护的路由中传递道具，或者是否有更好的方法来解决我的问题。
我之所以觉得需要在受保护的路由中传递一个道具，是因为注销按钮位于受保护的组件中，并且我需要与包含所有路由的父组件通信，以告知用户正在尝试注销。
相关代码如下：
父组件：
render() {
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthe
浏览 14提问于2018-03-01得票数 6
回答已采纳
1回答
我目前正在学习reactjs，以便创建一个小型应用程序。
因此，我从github下载了，并开始研究它以了解reactjs是如何工作的。
后来，我想在同一个模板下创建一个登录页面，所以我这样做了：
在“视图”下，我在登录文件夹中创建了新页Login.jsx。
路径:视图/Login/Login.jsx
import React from "react";
import { Grid } from "material-ui";
import {
ItemGrid
} from "components";
function Login({ ..
浏览 0提问于2018-04-09得票数 2
回答已采纳
1回答
我不是百分之百确定我所做的是正确的。基本上我有一个包含多个组件的页面。向其中一个组件DynamicRequestorDetails传递要添加到其中的可能组件的列表(例如，文本框或下拉列表)。这个方法可以工作，并生成文本框/下拉框。我的问题是父容器的handleChange事件似乎没有传递给componentHandler生成的动态组件。我还有什么遗漏的吗？我看到这些值是正确传递的，但是在调试期间，动态创建的组件似乎没有触发handleChange事件。
我有以下文件：
下拉组件：
import React, {PropTypes} from 'react';
const Dr
浏览 3提问于2018-08-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
