收到错误消息：意外的标记

Question

我试图在react这个代码，但我得到这个错误：

Unexpected Token .

我试图bind价值的东西上html，看看价值变动反映在html上，如angular ng-bindings。

代码：

class NameForm extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {value: ''}; 

     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
     this.setState({value: event.target.value}); 
    } 


    handleSubmit(event) { 
     alert('A name was submitted: ' + this.state.value); 
     event.preventDefault(); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <label> 
        Name: 
        <input type="text" value={this.state.value} onChange={this.handleChange} /> 
       </label> 
       <input type="submit" value="Submit" /> 
      </form> 
      <a>{this.state.value}</a> 
     ); 
    } 
} 

ReactDOM.render(
    <NameForm />, 
    document.getElementById('root') 
); 

谁能告诉我在哪里，我错了。

Answer 1

原因是，你是从render方法返回多于一个html元件，在一个部件的render，可以只返回一个节点;如果您有要返回的元素列表，则必须将其包装在div，span或任何其他component之内。

不要忘记，render()基本上是一个function,Functions总是接受一些参数，总是return正好一个值。

使用此：

return (
    <div> 
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
     <a>{this.state.value}</a> 
    </div> 
);