Не могу передать реквизит IIFE в JSX - PullRequest
Новая
       18

Не могу передать реквизит IIFE в JSX

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

Я пытаюсь использовать response-rails для создания пользовательского интерфейса для существующего приложения rails. Я хочу создать динамический список задач, который будет заполнен данными из моего рельсового сервера. Я передаю задачи компоненту через тэг erb, предоставленный гемом «response-rails». Это должно сделать данные доступными для использования, но когда я пытаюсь отобразить их в JSX, я получаю 

 Uncaught TypeError: Cannot read property 'tasks' of undefined

сообщение об ошибке в консоли для строки 

 for (var i = 0; i < this.props.tasks.length; i++) {

Вот мой код:

Компонент React (рельсы) 

class TodoApp extends React.Component{

  render() {
    return (
      <div className="card col-6">
        <div className="card-header">
          <div className="float-rights">
            create new button
         </div>
        </div>
       <div className="card-body">
          {
            (function(){
              var html;
             for (var i = 0; i < this.props.tasks.length; i++) {
                html += this.props.tasks[i]
              }
             return html;
            })()
         }
        </div>
     </div>
    )
  }
 }

Представление ERB / ​​HTML, отображаемое в 

 <%= react_component('TodoApp', tasks: @collaboration.tasks) %>

В идеале цикл будет работать, и я получу какой-то вывод.

Ответы [ 2 ]

2 голосов
/ 21 июня 2019

Вы можете заставить свой IIFE работать, связав this из внешней области видимости, 

<div className="card-body">
    {
        (function(){
             var html;
             for (var i = 0; i < this.props.tasks.length; i++) {
                html += this.props.tasks[i]
              }
            return html;
         }).bind(this)()
     }
</div>

Но это не идиоматический React.Ниже приведено следующее: 

<div className="card-body">
    {this.props.tasks.join('')}
</div>

Если задачи представлены в формате html, как указано в имени используемой вами переменной, 

<div className="card-body"
     dangerouslySetInnerHTML={ { __html: this.props.tasks.join('') } }>
</div>

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

2 голосов
/ 21 июня 2019

Ваш IIFE - это закрытие, поэтому this не тот контекст, о котором вы думаете. Попробуйте это ... 

<div className="card-body">
    {this.props.tasks.map(task => task)}
</div>

Хотя я не уверен, что такое task ... это еще одна проблема, которую вам, возможно, придется решить. Если вы предоставите объяснение, я соответствующим образом обновлю свой ответ.

...