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

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

您可以通过从外部范围绑定 this 让您的 IIFE 工作，

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

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

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

Can't pass props to IIFE in JSX

reactjs

react-rails