Reactjs 将函数 props 传递给组件 <div> 标签上的 prop `addrow` 的值无效。从元素中删除它

Posted 2023-02-22

【中文标题】Reactjs 将函数 props 传递给组件 <div> 标签上的 prop `addrow` 的值无效。从元素中删除它

【英文标题】：Reactjs pass function props to component Invalid value for prop `addrow` on <div> tag. Either remove it from the element

【发布时间】：2019-11-01 22:03:30

【问题描述】：

我正在尝试将函数传递给组件，但遇到以下问题：

“Reactjs 将函数道具传递给组件 标记上的道具addrow 的值无效。要么将其从元素中删除，要么传递字符串或数值以将其保留在 DOM 中。”

代码：

constructor(props) 
    super(props);
    this.props = props;
    this.addRows = this.addRows.bind(this);


addRows() 
 console.log("AddRows")


<CreateQrModal
      show=modalAdd
      onHide=this.modalAddClose
      addrow=this.addRows
/>

组件：

  handleSubmit() 
    this.props.addrow()
  

【问题讨论】：

你能分享完整的代码吗？

这本质上，简而言之，就是App中会成为Modal的数量，我想确保当用户点击handleSubmit()函数所在的按钮时，最后它必须运行 this.props.addrow()。它似乎有效，但是当我第一次调用组件模式时，它给了我这个错误。

【参考方案1】：

来自您的代码 sn-p..

将 this.props.onRow() 更改为 this.props.addrow().. 似乎您输入了错误的名称。

您还可以使用箭头函数语法绕过绑定

所以addRow = () => ..... 那么您不必手动将函数绑定到构造函数中的组件。

【讨论】：

另外，最好使用大写驼峰式。我认为您只是输入错误 addrow.. 所以您可以将其更改为 addRow

不仅是我写错了。简而言之，这本质上是应用程序中将成为模态的数量，我想确保当用户单击 handleSubmit() 函数所在的按钮时，最后它必须运行它。道具.addrow()。它似乎有效，但是当我第一次调用组件模式时，它给了我这个错误。

如果我尝试将名称以大写形式写入，例如从 addrow 到 addRow，则会出现以下错误：React 无法识别 DOM 元素上的 addRow 属性。如果您有意作为自定义属性出现在 DOM 中，请将其拼写为小写 addrow。如果您不小心从父组件中传递了它，请将其从 DOM 元素中移除。

hmm 尝试在 CreateQrModal 组件中拆分你的道具 const addRow, ...rest = this.props reactjs.org/warnings/unknown-prop.html ***.com/questions/54468535/… 查看这些文章

问题是谁给了我以下错误：React 无法识别 DOM 元素上的 addRow 属性。如果您有意作为自定义属性出现在 DOM 中，请将其拼写为小写 addrow。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。即使我在 Modal 组件中不使用它，也只需将其传递给我给出错误的组件即可。