我正在转换几年前做的一些 HTML/JS 表单，作为 React.js 学习练习，我遇到了一个绊脚石，我想了解其原因。
基本上，就像最初一样，我有一个选择，您可以在其中选择要显示的表单。选择的 onchange 处理程序显示所选表单并隐藏其他表单。因此，我对此进行 React 改造的第一步是将表单制作成 React 组件，效果很好。我留下这个作为我的 HTML:
<body>
<div id="main">
<select id="calculations" onChange="handleSelect();">
<option value="" selected="selected">SELECT CALCULATION FORM</option>
<option value="1">Enter pace and distance to get a total time</option>
<option value="2">Enter distance and target time to get the required pace</option>
<option value="3">Enter pace and time to get the distance run</option>
<option value="4">Convert mph to mins/mile</option>
<option value="5">Convert mins/mile to mph</option>
</select>
<div id="calcForm"/>
</div>
</body>
这是 JS:
window.handleSelect=function(){
var selected=$("#calculations").val();
if(selected!=""){
React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
} else {
$("#calcForm").html("");//clear it
}
};
不过，在我尝试将主要选择放入 React 组件来完成工作时，我感到很沮丧。我尝试创建一个 SelectCalc 组件并像这样使用它:
<body>
<div id="main">
<div id="selectCalc"/>
<div id="calcForm"/>
</div>
</body>
在我的 app.js 中，我有这个:
React.render(React.createElement(SelectCalc,null), document.getElementById('selectCalc'));
我将handleSelect设为SelectCalc类的一个函数，这样当选择一个选项时，它会调用这个:
React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
但这就是问题所在。这样做后，当我选择一个选项时，我收到错误:
错误:不变违规:_registerComponent(...):目标容器不是 DOM 元素。
有问题的目标容器是“calcForm”div，如 document.getElementById('calcForm') 中所标识。由于令我困惑的原因，这是空的(我在控制台中检查过)。然而它显然存在于 HTML 中，并且在 React 改造之前，我的更原始的选择更改处理程序成功地定位了它。
那么问题出在哪里呢？我在这里误解了什么？鉴于这是一个非常简单的 React.js 示例，我应该如何做呢？
非工作版本的 fiddle https://jsfiddle.net/JohnMoore/7rp3n1oy/2/ ，我希望 - 第一次使用 Fiddle(!)，所以我希望它能显示这个问题。尝试运行它并选择其中一个选项，然后在控制台中查看错误。我注意到 JSFiddle 上还有一个前面的错误:“SyntaxError:预期表达式，得到 '<'”。我不得不说这对我来说没有多大意义，因为我本以为渲染返回的预期内容准确地说是一些以 < 开头的 HTML。我不知道这是否相关，或者是否是 Fiddle 环境的产物。
最佳答案
我通过删除 div 解决了这个问题s。它们将在 react 组件中动态创建。
Here是 fiddle 。
编辑:旧的不起作用，因为 <div id="selectCalc" />是“无效”html。它将被替换为 <div id="selectCalc">而不是<div id="selectCalc"></div> 。由于缺少结束标记，浏览器会忽略 <div ... /> 之后的所有内容。 。 -> <div id="calcForm" />不会出现在 DOM 中。
Here是带有更正的 html 标签的版本，但您应该更喜欢其他版本。
看看this有关 in/valid html 标签的更多信息。
关于reactjs - 如何让简单的表单更像 React？ (DOM节点丢失)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30887319/