如何向可重复使用的函数组件添加N个数据属性的React代码。

huangapple go评论62阅读模式
英文:

React - how to add N number of data properties to a reusable functional component

问题

以下是您要求的代码部分的翻译:

//
export default function Input({
  dataAttributes=null,
 
}) 

  return (
    <input class="" {...dataAttributes}/>
 
  );
}
import Input from "./Input"
<Input dataAttributes={'data-title':'this title', 'data-someting':'this is something else', ...add more}/>

to dom

<input data-title="this title" data-something="this is something else" ...whatever else was added/>
英文:

Is this something that is possible? I keep getting some weird errors, again the dataAttribute should not be finite.

//
export default function Input({
  dataAttributes=null,
 
}) 

  return (
    <input class="" {...dataAttributes}/>
 
  );
}
import Input from "./Input"
<Input dataAttributes={'data-title':'this title', 'data-someting':'this is something else', ...add more}/>

to dom

<input data-title="this title" data-something="this is something else" ...whatever else was added/>

答案1

得分: 2

需要在Input标签内使用双括号。第一对用于在标签内编写JavaScript,第二对用于声明对象。

<Input dataAttributes={{'data-title':'this title', 'data-someting':'this is something else', ...add more}}/>
英文:

You need to use double brackets inside the Input tag. The first pair is to write javascript inside tags, the second pair are for the object you're declaring.

&lt;Input dataAttributes={{&#39;data-title&#39;:&#39;this title&#39;, &#39;data-someting&#39;:&#39;this is something else&#39;, ...add more}}/&gt;

huangapple
  • 本文由 发表于 2023年5月23日 00:34:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/76308254.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定