React无法渲染，出现了未终止的JSX内容错误

Question

class HelloWorldComponent extends React.Component {

  render() {
    const person = {"name":"james"};
    return (      
      <input type="text" placeholder="name" value={person.name}>      
    );
  }
}

React.render(
  <HelloWorldComponent />, document.getElementById('react_example')
);

http://jsbin.com/lalomigufo/edit?js，控制台，输出

不知道出什么问题了，尝试在https://babeljs.io中检查代码时出现了Unterminated JSX contents错误

Answer 1

输入是一个自闭标签。 您需要在输入元素的末尾添加“ /”：

return (      
  <input type="text" placeholder="name" value={person.name} />      
);

Answer 2

作为来自facebook的文件：

在HTML中，表单元素（例如，和）通常会维护自己的状态并根据用户输入对其进行更新。 在React中，可变状态通常保留在组件的state属性中，并且仅使用setState（）更新

因此，您的代码将常量值设置为value属性，这是错误的，无法更改此值，您可以键入任何内容。