Question

我正在尝试使用react-rails为现有的rails应用程序创建UI。我想创建一个动态待办事项列表，其中填充了我的Rails后端中的数据。我正在通过gem'react-rails'提供的erb标签将任务传递给组件。这应该使数据可以作为道具供我使用，但是当我尝试在JSX中呈现它时，我得到了

 Uncaught TypeError: Cannot read property 'tasks' of undefined

该行的控制台中的错误消息

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

这是我的代码：

React（rails）组件

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) %>

理想情况下，循环会运行，我会得到一些输出。

Answer 1

您的IIFE是闭包，因此this并不是您认为的上下文。试试这个...

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

尽管我不确定task是什么……这可能是您需要解决的另一个问题。如果您提供解释，我将适当更新我的答案。

Answer 2

您可以通过从外部范围绑定"watch": "node-sass ... -watch ; npm run postwatch",来使IIFE正常工作，

this

但这不是惯用的React。以下是

<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>

如果任务使用您所使用的变量名称所指示的html格式，

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

使用这种方法，您必须清理任务以防止脚本注入，并且还失去了诸如事件绑定之类的反应优势。不推荐

无法将道具传递给JSX中的IIFE

2 个答案: