React-rails ：映射多个道具答案

【问题标题】：React-rails : Map multiple propsReact-rails ：映射多个道具
【发布时间】：2015-10-08 13:15:48
【问题描述】：

我刚开始使用 react-rails gem，下面是我需要帮助的代码。我的 _mounts.js.jsx，

var Mounts = React.createClass({

render () {
    var showMounts = (mount, details) => <Mount name={mount.name} path={mount.mount_point} det={details} />;

    return (
        <div className="card">
                <div className="card-main">
                    <div className="card-inner margin-bottom-no">
                        <p className="card-heading">Mount Points</p>
                            <div className="card-table">
                                <div className="table-responsive">
                                    <table className="table table-hover table-stripe"  >
                                        <thead>
                                            <tr>
                                                <th>Mounted as</th>
                                                <th>Path</th>
                                                <th>Size</th>
                                                <th>Mount/Unmount</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            {this.props.mounts.map(showMounts}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                    </div>
                </div>
            </div>                          
    )
}

});

我在我的 react_component 中传递了两个道具，

<%= react_component "Mounts", { mounts: @mounts, mount_details: b} %>

@mounts 是一个文件系统对象，b 是一个数组。

我的 _mount.js.jsx 文件

var Mount = React.createClass({
render () {
    var showMount = (mount) => <Mount name={mount} />;
    if(this.props.det == "true"){
        dat = "Unmount"
    }
    else{
        dat =  "Mount"
    }


    return (
        <tr>
            <td> {this.props.name}</td>
            <td> {this.props.path}</td>
            <td> Undefined Size</td>
            <td>
                {this.props.det}
            </td>

        </tr>                               
    )
}

});

我的 {this.props.det} 显示的是数组索引值，而不是索引中的值，即 (0,1,2,3)。

我是 React 的菜鸟，感谢任何帮助。提前致谢。

【问题讨论】：

标签： javascript ruby-on-rails ruby reactjs react-rails

【解决方案1】：

事实上，这是预期的行为。对于传递给Array.prototype.map 的函数，第二个参数将是索引。

这是一个例子：

var myArray = ["A", "B", "C"]
var myMapFn = function(item, index) { 
  console.log(index, " => ", item) 
}
myArray.map(myMapFn)
// 0 => A
// 1 => B
// 2 => C

注意myMapFn 的参数是(item, index)。

我认为您想要 mount_details 数组中的项目而不是该索引。对吗？

如果是这样，您可以通过修改 showMounts 来解决您的问题：

var mountDetails = this.props.mount_details
var showMounts = function(mount, mountIndex) {
   // use the given index to find the matching `details` object:
   var details = mountDetails[mountIndex] 
   // now create the <Mount />
   return (
     <Mount 
       name={mount.name} 
       path={mount.mount_point} 
       det={details} 
     />
  )
}

在该实现中，该函数使用给定的索引从mountDetails 数组中找到相应的条目。

这能满足你的要求吗？

【讨论】：