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

Question

我想使用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”部分

Answer 1

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

据开发商介绍。mozilla。org如果要指定自定义属性，请在本例中使用data-[customName]类似data key。

使用以下格式：'属性'：'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'}

Answer 2

以下示例使用键道具，因此不会显示警告。

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>

Answer 3

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

如果你想看翻译，可以访问babeljs。木卫一

例如：

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

结果致：

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

而且，因为我还不能发表评论。key字保留如上所述。所以使用键，这样反应可以渲染更聪明，如果你想传递自己的东西，还有一些其他的名字。

编辑：

因此，要使组件与阵列保持原样，请这样做。

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>