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屬性，這是錯誤的，無法更改此值，您可以鍵入任何內容。