Проблема рисования SVG из файла с использованием React и JQuery

Question

Я пытаюсь запрограммировать приложение манипуляции SVG с помощью React, и я использую JQuery для чтения и фильтрации файла SVG, но я не знаю, почему, когда я использую .map(), не работает, но когда яНарисуйте путь к элементу из массива путей, используя что-то вроде paths[0], это работает.

import React from 'react'
import $ from 'jquery'

class Tile extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        paths: [],
        fills: [],
        transforms: [],
        strokeWidths: [],
        foo: ["1234", "2345"]
    }
}

componentDidMount() {
    var self = this;
    $.get("xml/svg.xml", (xml) => {
        $(xml).find('path').each((index, path) => {
            self.setState({ paths: [...self.state.paths, $(path).attr('d')] })
            self.setState({ fills: [...self.state.fills, $(path).attr('fill')] })
            const transform = ($(path).attr('transform') !== undefined) ? $(path).attr('transform') : "translate(0 0)"
            self.setState({
                transforms: [...self.state.transforms, transform]
            })
        });
    })
}

render() {
    return (
        <div className="tile">
            <svg width="100%" height="100%" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                {this.state.paths.map((path, index) => {
                    <path d={path} transform={this.state.transforms[index]} fill={this.state.fills[index]} stroke={this.state.strokeWidths[index]}></path>
                })}
            </svg>
            <svg width="100%" height="100%" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path d={this.state.paths[1]}></path>
            </svg>
        </div>
    )
}
}
export default Tile

SVG-файл:

<svg width="200" height="200" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="m0-0.099609v19a19 19 0 0 0 19-19zm185 0.099609v15h15v-15zm15.041 170a30 30 0 0 0-30 30h30zm-200.04 15v15h15v-15z" fill="#d40000"/>
    <path d="m128.81 97.034a30.508 28.39 0 0 1-30.508 28.39 30.508 28.39 0 0 1-30.508-28.39 30.508 28.39 0 0 1 30.508-28.39 30.508 28.39 0 0 1 30.508 28.39z" fill="#ff7fff" stroke-width="0"/>
</svg>

Любое предложение или ссылка будут оценены.

Answer 1

Я отредактировал ваш обратный вызов для извлечения данных, чтобы установить состояние только один раз, и изменил ваш рендеринг на рендеринг, только если существует paths.Я также заметил, что ваш опубликованный код не анализирует stroke-width, поэтому я добавил, что в дополнение к отсутствующему возврату на карту, как вы упомянули в своем комментарии, я также рекомендовал бы отказаться от зависимости от jQuery.Вот хорошая справка: Вам может не понадобиться jQuery

import React from "react";
import $ from "jquery";

class Tile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paths: [],
      fills: [],
      transforms: [],
      strokeWidths: [],
      foo: ["1234", "2345"]
    };
  }

  componentDidMount() {
    var self = this;
    $.get("xml/svg.xml", xml => {

      const paths = [];
      const fills = [];
      const transforms = [];
      const strokeWidths = [];

      $(xml)
        .find("path")
        .each((index, path) => {
          const transform =
            path.getAttribute("transform") !== undefined
              ? path.getAttribute("transform")
              : "translate(0 0)";
          transforms.push(transform);
          paths.push(path.getAttribute("d"));
          fills.push(path.getAttribute("fill"));
          strokeWidths.push(path.getAttribute("stroke-width")); //?? not included in your original code
        });

      self.setState({ paths, fills, transforms, strokeWidths });
    });
  }

  render() {
    const { paths, fills, transforms, strokeWidths } = this.state;
    return (
      <div className="tile">
        {paths.length > 1 && [
          <svg
            key="svg1"
            width="100%"
            height="100%"
            version="1.1"
            viewBox="0 0 200 200"
            xmlns="http://www.w3.org/2000/svg"
          >
            {paths.map((path, index) => (
              <path
                d={path}
                transform={transforms[index]}
                fill={fills[index]}
                stroke={strokeWidths[index]}
              />;
            ))}
          </svg>,
          <svg
            key="svg2"
            width="100%"
            height="100%"
            version="1.1"
            viewBox="0 0 200 200"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d={paths[1]} />
          </svg>
        ]}
      </div>
    );
  }
}
export default Tile;