如何使用javascript代码作为反应语法代码？

我在我的项目中使用OpenLayers API映射。我不知道在react或vice verca中使用js代码的正确方法是什么

是如何在地图中使用标记的答案，但我无法在当前代码中使用它，因为我也不了解react sytax。下面是我的空映射代码示例

    import React, { Component } from 'react';
    import { Map, layer, Layers } from 'react-openlayers';
    import { Container } from 'react-bootstrap';
    import { transform } from 'ol/proj';
    import '../../styles/openlayers-map.css';

    class OpenlayersMap extends Component {
      render() {
        return (
          <Container className="map-container">
            <Map view={{
              center: transform([30, 50],
                'EPSG:4326', 'EPSG:3857'),
              zoom: 12,
              maxZoom: 18,
              minZoom: 4,
            }}
            >
          <Layers>
            <layer.Tile />
          </Layers>
        </Map>
      </Container>
    );
  }
}

export default OpenlayersMap;

import React，{Component}来自'React'；
从“react openlayers”导入{Map，layer，Layers}；
从'react bootstrap'导入{Container}；
从“ol/proj”导入{transform}；
导入“../styles/openlayers map.css”；
类OpenLayerMap扩展组件{
render（）{
返回(
);
}
}
导出默认的OpenLayerMap；

---

这里提供了一个js代码示例。我非常感谢您为我的目的使用这段代码所提供的任何帮助

react只是一个处理DOM节点更新的库，其余是纯javascript。因此，在使用react时，您接触到的3种最常见的特定于react的东西是：

反应生命周期方法（渲染、组件安装等）

JSX—这只允许您编写类似html的元素，并在后台将其转换为函数调用；React.createElement

道具和状态-此控件控制组件何时需要重新呈现和更新UI

因此，在JSX元素之外，您可以执行任何您想要的javascript：

class MyComponent extends React.Component {
  // 1
  state = {
    mountOffset: 0,
  };

  // 2
  componentDidMount() {
    // 3
    this.initMountOffsetInterval();
  }

  // 4
  initMountOffsetInterval() {
    // 5
    setInterval(() => {
      // 6
      const mountOffset = this.state.mountOffset + 1;
      // 7
      this.setState({ mountOffset });
    }, 1000);
  }

  // 8
  render() {
    // 9
    const { mountOffset } = this.state;

    // 10
    return (
      <h1> 
        This component has been mounted for: { mountOffset } seconds
      </h1>
    );
  }
}

类MyComponent扩展了React.Component{ // 1 状态={ 偏移量：0， }; // 2 componentDidMount（）{ // 3 this.initMountOffsetInterval（）； } // 4 initMountOffsetInterval（）{ // 5 设置间隔（（）=>{ // 6 常量mountOffset=this.state.mountOffset+1； // 7 this.setState（{mountOffset}）； }, 1000); } // 8 render（）{ // 9 const{mountOffset}=this.state； // 10 返回( 此组件已装入：{mountOffset}秒 ); } } 让我们分解上面的例子；这里混合了普通javascript和特定于react的代码：

state只是一个普通的javascript对象

*componentDidMount是一个特定于react的生命周期方法-这里没有什么特别的，它只是在组件装载时运行

普通js实例方法调用

简单的js类实例方法，您可以随意制作

setInterval只是一个我们都知道的普通javascript interval函数

普通javascript对象分解分配

*setState是一个特定于react的函数，它允许我们更新组件的状态，以便组件可以重新渲染

*render是一种特定于react的生命周期方法—它告诉react库应该从组件中呈现哪些html

普通javascript对象分解分配

返回此组件应呈现的html标记

---

react只是一个处理DOM节点更新的库，其余是纯javascript。因此，在使用react时，您接触到的3种最常见的特定于react的东西是：

反应生命周期方法（渲染、组件安装等）

JSX—这只允许您编写类似html的元素，并在后台将其转换为函数调用；React.createElement

道具和状态-此控件控制组件何时需要重新呈现和更新UI

因此，在JSX元素之外，您可以执行任何您想要的javascript：

class MyComponent extends React.Component {
  // 1
  state = {
    mountOffset: 0,
  };

  // 2
  componentDidMount() {
    // 3
    this.initMountOffsetInterval();
  }

  // 4
  initMountOffsetInterval() {
    // 5
    setInterval(() => {
      // 6
      const mountOffset = this.state.mountOffset + 1;
      // 7
      this.setState({ mountOffset });
    }, 1000);
  }

  // 8
  render() {
    // 9
    const { mountOffset } = this.state;

    // 10
    return (
      <h1> 
        This component has been mounted for: { mountOffset } seconds
      </h1>
    );
  }
}

类MyComponent扩展了React.Component{ // 1 状态={ 偏移量：0， }; // 2 componentDidMount（）{ // 3 this.initMountOffsetInterval（）； } // 4 initMountOffsetInterval（）{ // 5 设置间隔（（）=>{ // 6 常量mountOffset=this.state.mountOffset+1； // 7 this.setState（{mountOffset}）； }, 1000); } // 8 render（）{ // 9 const{mountOffset}=this.state； // 10 返回( 此组件已装入：{mountOffset}秒 ); } } 让我们分解上面的例子；这里混合了普通javascript和特定于react的代码：

state只是一个普通的javascript对象

*componentDidMount是一个特定于react的生命周期方法-这里没有什么特别的，它只是在组件装载时运行

普通js实例方法调用

简单的js类实例方法，您可以随意制作

setInterval只是一个我们都知道的普通javascript interval函数

普通javascript对象分解分配

*setState是一个特定于react的函数，它允许我们更新组件的状态，以便组件可以重新渲染

*render是一种特定于react的生命周期方法—它告诉react库应该从组件中呈现哪些html

普通javascript对象分解分配

返回此组件应呈现的html标记

---

欢迎来到StackOverflow，我认为您应该尝试阅读更多关于React的内容，React只是javascript，所以“在React或vice verca中使用js代码”没有真正意义。您可以在

OpenlayersMap

类中添加somme方法（作为普通类方法），并在

render

方法中使用它。欢迎使用StackOverflow，我认为您应该尝试阅读有关React的更多内容，React只是javascript，因此“在React中使用js代码或反之亦然”没有真正意义。您可以在

OpenlayersMap

类中添加somme方法（作为普通类方法），并在

render

方法中使用它。谢谢您的回答！我理解这一点，但是，在我的react JSX语法中“使用”该代码会遇到困难。谢谢您的回答！我理解这一点，但是，在react JSX语法中“使用”该代码会遇到困难