Question

我正在学习React并喜欢它。按照本文中的代码学习如何在组件之间传递数据：

https://travishorn.com/passing-data-between-classes-components-in-react-4f8fea489f80

这是用ES5编写的，而我正尝试用ES6编写，如以下代码所示：

 class NameInput extends React.Component {   render() {
     return (    <div>
         <label for="name">Name</label>
         <input id="name" value={this.props.name} onChange={this.props.onChange} />
       </div>
           );
         }
       }

 class DisplayName extends React.Component {   render() {
     return (
            <p>My name is {this.props.name}.</p>
           );
         }
       }


 class App extends React.Component {
     constructor(props) {   super(props);   this.state = ""; }

  getInitialState = () => {
         return {
           name: this.props.name,
         };   
        }   

  changeName = (event) => {
         return this.setState({ name: event.target.value })   
         } 

  render(){   return(
           <div>
             <NameInput name={this.state.name} onChange=  `{this.changeName} />`                                        
             <DisplayName name={this.state.name} />
          <div/>
          );   } }    
          ReactDOM.render(<App name="Travis"/>, mountNode);

Using this online tool: jscomplete.com 当我尝试运行代码时，出现以下错误：

SyntaxError: unknown: Unterminated JSX contents (40:36)

  38 |   }
  39 | }
> 40 | ReactDOM.render(<App name="Travis"/>, mountNode);
     |                                     ^
  41 |

只需将该代码复制并粘贴到jscomplete.com中并运行它。您不需要帐户。

我一直盯着屏幕看一个多小时，一行又一行，但我不知道哪里出了问题。谁能救我，这样我才能理解我做错了什么？这是一个小例子，我敢肯定有人会帮助我。感谢您的帮助。

Answer 1

只是一个小的错字！您的结束标记中包含<div/>而不是</div>。：）

（您的NameInput组件中还有一些倒钩）

React App组件中未终止的JSX内容

1 个答案: