React中JS动态添加元素无法显示问题求助

尝试通过JavaScript动态添加Yandex地图的Placemark标记点，但标记点无法显示，控制台无报错；直接在代码中静态添加标记点则能正常显示。此前用原生JS实现时也遇到同样问题。

以下是相关代码：

import React from "react";
import './SearchPower.css';
import './SearchPowerMobile.css';
import { YMaps, Map, Placemark} from '@pbe/react-yandex-maps';
import { Parser } from 'html-to-react'

function App() {
  // 获取用户地理位置
  var getLocationPromise = new Promise((resolve) => {
    navigator.geolocation.getCurrentPosition(async function (position) {
    resolve([position.coords.latitude, position.coords.longitude])
    })
  })
    var [lat, setLat] = React.useState(0)
    var [lng, setLng] = React.useState(0)
  getLocationPromise.then((location) => {
    setLat(location[0])
    setLng(location[1])
  })
  if (lat == 0 && lng == 0) {
    lat = 55.75
    lng = 37.57 }

  // 创建地图
  var myMap = React.useMemo(
    () => ({ center: [lat, lng], zoom: 9 })
  );
  
      const obj1 = {lt: 55.75, lg: 37.57}
      const obj2 = {lt: 50.75, lg: 20.57}
      const obj3 = {lt: 40.75, lg: 30.57}

      var geoObject = [obj1, obj2, obj3]

      var Placemarks = '<Placemark geometry={[53.75, 25.57]}></Placemark>'

      for (var i = 0; i < geoObject.length; i++) {
        Placemarks += '<Placemark geometry={[' + geoObject[i].lt + ',' + geoObject[i].lg + ']}></Placemark>'
      }
    return (
          <YMaps>
          <Map style={{width: '100%', height: '100%', margin: '0 0 10px 0', border: '3px solid #4D4AFF'}} state={myMap}>
              <Placemark geometry={[lat, lng]} 
                  options={{
                    iconLayout: 'default#image',
                    iconImageHref: imageHref,
                    iconImageSize: [40, 40],
                    iconImageOffset: [0, 0],
                    iconOffset: [-5, -38]
                  }} id="myPosition"></Placemark>
                <div>
                  {Parser().parse(Placemarks)} // 此处应显示地图标记点，但无任何内容
                </div>
          </Map>
          </YMaps>
        </div>
        )
    }
    export default App;

核心问题 #

你用字符串拼接React组件代码，再通过html-to-react的Parser解析的方式是错误的——html-to-react只能解析原生HTML标签，无法识别React组件（比如<Placemark>），自然无法渲染出标记点。另外你的地理定位逻辑也存在一些可优化的地方。

正确实现方式 #

1. 用数组映射生成动态组件
   在React中，动态生成组件的标准做法是使用数组的map方法，直接生成Placemark组件数组，而不是拼接字符串。

2. 修复地理定位逻辑
   将获取地理位置的逻辑放到useEffect中，避免组件每次渲染都重复创建Promise；同时不要直接修改state变量，而是通过条件渲染处理初始值。

修改后的完整代码：

import React, { useState, useEffect, useMemo } from "react";
import './SearchPower.css';
import './SearchPowerMobile.css';
import { YMaps, Map, Placemark} from '@pbe/react-yandex-maps';

function App() {
  const [lat, setLat] = useState(0);
  const [lng, setLng] = useState(0);

  // 获取用户地理位置，放到useEffect中避免重复执行
  useEffect(() => {
    const getLocation = () => {
      return new Promise((resolve) => {
        navigator.geolocation.getCurrentPosition((position) => {
          resolve([position.coords.latitude, position.coords.longitude]);
        });
      });
    };

    getLocation().then((location) => {
      setLat(location[0]);
      setLng(location[1]);
    });
  }, []);

  // 处理初始坐标，避免直接修改state
  const currentLat = lat === 0 && lng === 0 ? 55.75 : lat;
  const currentLng = lat === 0 && lng === 0 ? 37.57 : lng;

  // 创建地图配置
  const myMap = useMemo(
    () => ({ center: [currentLat, currentLng], zoom: 9 }),
    [currentLat, currentLng]
  );

  const geoObject = [
    {lt: 55.75, lg: 37.57},
    {lt: 50.75, lg: 20.57},
    {lt: 40.75, lg: 30.57}
  ];

  // 用map生成Placemark组件数组
  const placemarkComponents = [
    <Placemark key="initial" geometry={[53.75, 25.57]} />,
    ...geoObject.map((item, index) => (
      <Placemark key={`mark-${index}`} geometry={[item.lt, item.lg]} />
    ))
  ];

  return (
    <YMaps>
      <Map 
        style={{width: '100%', height: '100%', margin: '0 0 10px 0', border: '3px solid #4D4AFF'}} 
        state={myMap}
      >
        <Placemark 
          geometry={[currentLat, currentLng]} 
          options={{
            iconLayout: 'default#image',
            iconImageHref: imageHref, // 注意：需要确保imageHref已定义
            iconImageSize: [40, 40],
            iconImageOffset: [0, 0],
            iconOffset: [-5, -38]
          }} 
          id="myPosition"
        />
        {/* 直接渲染生成的组件数组 */}
        {placemarkComponents}
      </Map>
    </YMaps>
  );
}

export default App;

关键改动说明 #

• 移除了html-to-react的Parser，改用map方法直接生成React组件数组，这是React动态渲染组件的标准方式。
• 将地理定位逻辑移入useEffect，并设置空依赖数组，确保只在组件挂载时执行一次。
• 用currentLat和currentLng处理初始坐标，避免直接修改state变量，符合React的状态管理规范。
• 给每个动态生成的Placemark添加唯一的key属性，这是React列表渲染的要求，能提升性能并避免警告。

内容的提问来源于stack exchange，提问作者Виктор