我正在学习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中并运行它。您不需要帐户。
我一直盯着屏幕看一个多小时,一行又一行,但我不知道哪里出了问题。谁能救我,这样我才能理解我做错了什么?这是一个小例子,我敢肯定有人会帮助我。感谢您的帮助。
答案 0 :(得分:2)
只是一个小的错字!您的结束标记中包含<div/>
而不是</div>
。 :)
(您的NameInput组件中还有一些倒钩)