React-рельсы: Карта несколько реквизита

Question

Я только начиная с жемчужиной реагирующих рельсов, и вот мой код ниже, что мне нужна помощь. My _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 является Filesystem объекта и б является массивом.

Мой _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 массива, используя заданный индекс.

Это делает то, что вы хотите?