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

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

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

问题

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

  1. //
  2. export default function Input({
  3. dataAttributes=null,
  4. })
  5. return (
  6. <input class="" {...dataAttributes}/>
  7. );
  8. }
  1. import Input from "./Input"
  2. <Input dataAttributes={'data-title':'this title', 'data-someting':'this is something else', ...add more}/>

to dom

  1. <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.

  1. //
  2. export default function Input({
  3. dataAttributes=null,
  4. })
  5. return (
  6. <input class="" {...dataAttributes}/>
  7. );
  8. }
  1. import Input from "./Input"
  2. <Input dataAttributes={'data-title':'this title', 'data-someting':'this is something else', ...add more}/>

to dom

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

答案1

得分: 2

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

  1. <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.

  1. &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:

确定