如何在没有 JSX 的元素中添加自定义属性（仅使用 createElement 方法）？

Posted 2023-02-22

【中文标题】如何在没有 JSX 的元素中添加自定义属性（仅使用 createElement 方法）？

【英文标题】：How to add custom attributes in an element without JSX (just using createElement method)?

【发布时间】：2020-01-30 23:44:29

【问题描述】：

我想使用 React 在元素中添加自定义属性（例如名为“key”的属性），但我只能添加一些关键字，如“className”、“style”等...

我现在的代码是这样的：

function TodoItem(props)
    return React.createElement("div",key:props.id,className:"todo-item",
        React.createElement("input",type:"checkbox",null),
        React.createElement("p",null,props.text)
    );

我无法添加“key:props.id”。

我的目标是创建这样的东西：

<div class="todo-item" key="<int>" data-reactid=".0.0"><input type="checkbox" data-reactid=".0.0.0"><p data-reactid=".0.0.$test">Take out trash</p></div>

现在我不知道如何放置 key="int" 部分

【问题讨论】：

key is a reserved prop name.

但是我怎样才能将它添加到元素中呢？

key 不会作为生成的 html 元素的属性出现。如果你真的希望它出现在页面中，你可以使用'data-key' 作为道具名称。

***.com/questions/31273093/…的可能重复

@EmileBergeron 成功了！我可以添加“data-key”属性，但是我有一个警告说“警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具”，我试图添加一个名为“key”的属性摆脱那个警告..

【参考方案1】：

只是好奇，你为什么不想使用 jsx？

如果你想看翻译可以访问 babeljs.io

例如：

function Comp() 
    return <div myprop="prop" />

结果：

function Comp() 
 return React.createElement("div", 
    myprop: "prop"
  );

而且，因为我还不能发表评论。如前所述，key 字已保留。 所以使用 key 这样 react 可以更智能地渲染，如果你想传递你自己的东西，还可以使用其他一些 propname。

已编辑：

所以要让你的组件与数组一样，请这样做。

function NoJSX(props) 
  return React.createElement(
    "div",
    
      key: "ishouldbeunique", // a unique value, specially for React
      myKey: "icanbeeverything" // whatever you want
    ,
    props.children
  );

将导致：

<div myKey="icanbeeverything">test me</div>

【讨论】：

据我所知，我需要解析 JSX 以转换为 js，现在我想跳过那部分，在学习 React 的同时使用 vanilla javascript。我最终会在未来使用 JSX。

使用 create-react-app 可以为您处理所有事情。我喜欢 JSX，给它一个机会是我的建议 :) 或者，如果那是一步之遥，你可以乱用 codeandbox.io。

是的，我知道 JSX 是 React 的最佳特性之一，我想稍后再使用它，但似乎因为我在使用 vanilla javascript 时遇到了这个问题，所以这是一个开始使用的好机会JSX 并解决问题。不过如果能回答这个问题就好了。无论如何感谢您的提示:)

I can not add "key:props.id" 对我来说是什么意思，它工作正常，请查看：codesandbox.io/s/wonderful-river-zr9kb

也许我没看对，但我在创建的元素中没有看到“key”属性...

【参考方案2】：

以下示例使用key prop，因此不会显示警告。

function TodoItem( arr ) 
  return arr.map(item =>
    React.createElement(
      "div",
      
        key: item.id, // <--- Put the key prop here.
        className: "todo-item"
      ,
      React.createElement("input",  type: "checkbox" , null),
      React.createElement("p", null, item.text)
    )
  );


const data = [
   id: 1, text: "Box 1" ,
   id: 2, text: "Box 2" 
];

const rootElement = document.getElementById("root");
ReactDOM.render(React.createElement(TodoItem,  arr: data ), rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

key:props.id: 我看还是可以的

【讨论】：

感谢您的帮助！这正是我想要的。现在我不在电脑上，但稍后我会尝试根据我的问题调整您的代码并尝试解决它。​​

我将代码框示例移至现场堆栈 sn-p，因为如果没有代码本身，您的答案是不完整的。我对其进行了一些更改以专注于解决方案并减少了它周围的噪音和重复。随意根据自己的喜好对其进行编辑。对不起，如果它改变太多;）

【参考方案3】：

Using data attributes

HTML5 在设计时考虑到了数据的可扩展性，这些数据应该与特定元素相关联但不需要具有任何定义的含义。 data-* 属性允许我们在标准的语义 HTML 元素上存储额外信息，而无需其他技巧，例如非标准属性...

根据 developer.mozilla.org，如果您想指定自定义属性，请在您的情况下使用 data-[customName]，如 data-key。

使用这种格式：'attribute':'key'

var elm = React.createElement(
    /* element          */ 'h1'
    /* custom attribute */ ,'data-key': 'todo-item'
    /* innerHTML        */ ,'Hello'
)

ReactDOM.render(
   elm,
   document.getElementById('root')
)

HTML DOM 结果：

<div id="root">
   <h1 data-key="todo-item">Hello</h1>
</div>

如果要添加类属性，请使用逗号'data-key': 'todo-item', className: 'myClass'