React-rails:映射多个道具

React-rails : Map multiple props

本文关键字：映射 React-rails      更新时间：2023-09-26

我刚刚开始与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>                               
    )
}

});

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

我是React的新手，任何帮助都很感激。

实际上，这是预期的行为。对于传递给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数组中查找相应的项。

那是你想要的吗?

相关文章：