无法通过反应 jsx 传递状态值。收到错误 - 意外令牌："this"

Question

以下代码将state键初始化为NULL，并在安装组件时为它们分配某些值。(所有这些都工作正常(

问题在于render函数中访问这些状态值。 在组件Map，initialCenter属性将对象作为值。这是我传递状态值并得到以下错误的地方。

编译失败 ./src/components/Mapcontainer.js 第 32：21 行：解析错误：意外的关键字"this">

export class MapContainer extends Component {
constructor() {
super();
this.state = {
lat: null,
lng: null,
};
}
componentDidMount() {
navigator.geolocation.watchPosition((position) => {
this.setState({
lat: position.coords.latitude,
lng: position.coords.longitude,
});
});
}
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{
lat: {this.state.lat},
lng: {this.state.lng},
}}
>
<Marker />
</Map>
);
}
}

Answer 1

initialCenter={{
lat: {this.state.lat},
lng: {this.state.lng},
}}

应该是

initialCenter={this.state} 

或

initialCenter={{
lat: this.state.lat,
lng: this.state.lng
}}

因为在前一种情况下，您将具有嵌套对象。lat: {this.state.lat}将导致语法错误，{this.state.lat}因为这会导致对象没有键。

Answer 2

无需将 javascript 代码再次包装在大括号中以lat: {this.state.lat}或lng: {this.state.lng}。就这样做

<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{    // one for expression evaluation and one for object literal
lat: this.state.lat,
lng: this.state.lng,
}}
>

有关更多说明，请参阅以下堆栈溢出线程。

反应中的双花括号的目的是什么 JSX 语法。