在ReactJS中使用createElement时如何写data-remote =“true”？

Question

我正在 ReactJSX 中使用createElement()创建表单。

我的代码如下所示：

var form = document.createElement('form');

form.id = "new_message_form";
form.method = 'post';
form.className = 'chat_input';

我希望在此表单中使用data-remote="true"（它应该是这样的：

form.data-remote="true";

有人可以建议怎么做吗？

Answer 1

由于html表单中没有data-remote或remote等标准属性，因此它只是与rails特定相关的自定义属性。

有关data- *属性的文档：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

因此，要设置该属性，您需要明确设置此属性：

form.setAttribute("data-remote", "true");

Answer 2

JSX

<form id="new_message_form" method="post" className="chat_input" data-remote="true"/>

去了JS

React.createElement("form", { id: "new_message_form", method: "post", className: "chat_input", "data-remote": "true" })

你可以在Babel REPL中使用JSX在线查看它是否被编译成你需要的东西：http://babeljs.io/repl/

Answer 3

我通过将属性直接设置为表单解决了我的问题。 代码： form.setAttribute（＆＃34;数据远程＆＃34;，＆＃34; true＆＃34;）;