Установить свойство стиля элементов в цикле карты в JSX в React - PullRequest
0 голосов
/ 08 июня 2019

Добрый день

Я занят обучением себя Реагировать на новую должность, которую я недавно начал.У меня глупый вопрос о синтаксисе, для которого я не знаю, как искать Google.

Приведенный ниже код взят из проекта, который я пытаюсь помочь во время обучения.Мне удалось понять широкие штрихи, так как у меня достаточно опыта работы с JavaScript.

Я пытаюсь назначить верхнее и левое значение для графика, который я отображаю на карте на основе x иy значение, которое я получаю от объекта в массиве, который я перебираю с помощью команды map.

По моим исследованиям, вам необходимо создать объект, который вы используете для тега стиля, прежде чем использовать его в своем JSX.У меня есть доступ только к значениям в объектах, через которые я зацикливаюсь внутри цикла, и я пытаюсь прочитать эти значения в существующий ранее объект, который я использую для стиля.

Ранее определенный объект со значениями по умолчанию сверху и слевазначения

constructor(props) {
    super(props);
    this.chartStyle = { top: "15px", left: "15px" }
  }

Цикл карты, где мне нужно изменить 'this.chartStyle' на основе данных объекта

this.props.data.data.map((d, i) => (
   <div key={"key"+i} style={this.chartStyle}>
       ...
   </div>
))

Я пытался создать объект на лету или изменить переменнуювнутри цикла, но я получаю ошибки компилятора, поэтому я, очевидно, делаю это не в том месте.

    this.props.data.data.map((d, i) => (
       <div key={"key"+i} style={top: d.y+"px, left: d.x}>
           ...
       </div>
    ))
...
    this.props.data.data.map((d, i) => (
       {this.chartStyle = {top: d.y+"px, left: d.x}}
       <div key={"key"+i} style={this.chartStyle}>
           ...
       </div>
    ))

Я был бы очень признателен, если кто-то может помочь мне понять, где я иду не так.

1 Ответ

1 голос
/ 08 июня 2019

для установки стилей в React вам нужно заключить его в двойные изогнутые скобки, а стили должны быть правильными

    this.props.data.data.map((d, i) => (
   <div key={"key"+i} style={{top: d.y+"px", left: d.x+"px"}}>
       ...
   </div>
))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...