Question

我刚刚开始使用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的菜鸟，任何帮助都表示赞赏。在此先感谢。

Answer 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数组中查找相应的条目。

这样做你想要的吗？

React-rails：映射多个道具

1 个答案: