Блог

У меня есть приложение react с некоторыми динамическими разделениями, исходящими из функции, которая обрабатывает набор данных для подключения с помощью стрелок. Каждый div — это «Вопрос», и у каждого вопроса есть «ответы», и у каждого ответа есть свой подвопрос. Взаимосвязь между подвопросами и ответами заключается в том, что каждый ответ и связанный с ним подвопрос имеют один и тот же идентификатор с разными префиксами (если ответ имеет идентификатор «option8», соответствующий подвопрос — «q8»). Проблема в том, что функция запущена, но не видит никакой стрелки.

Но когда я пытаюсь использовать статические идентификаторы HTML div, стрелки видны правильно

Я нашел модуль npm «react-dom-arrow» и создал функцию для сопоставления каждого ответа и его подвопроса и рисования стрелки следующим образом.

 drawArrows = () => {
    const questionsList = this.state.questionsData;
    return questionsList.map(each => {
        return (
            <Arrow
                fromSelector={`#option${each.order}`}
                fromSide={'right'}
                toSelector={`#q${each.order}`}
                toSide={'left'}
                color={'blue'}
                stroke={3}
            />
        )
    });
}

render () {
    return (
       ...code
       { this.drawArrows() }
    )
}
 

Я думал использовать свой собственный метод стрелки SVG, но не имею правильного представления о том, как создавать SVG с идентификаторами div. Как я могу решить это даже по-другому?