come accedere a vairables al di fuori della funzione mappa in js e jsx in un componente React

Question

var PieceList = React.createClass({ 

    render: function() { 

    var pieces; 
    if (this.props.pieces && this.props.onDeletePiece2) { 
     var pieces = this.props.pieces.map(function (piece) { 
     return (
      <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} /> 
     ) 
     }); 
    } 
    return (
     <div className="piecesTable"> 
     {pieces} 
     </div> 
    ); 
    } 
}); 

Sono perplesso su come farlo funzionare. Il problema è che {this.props} non è disponibile all'interno della funzione mappa.

Farebbe meglio a stare qui? stumped, pls halp!

Answer 1

EDIT 2: React 0.14.x

è possibile definire stateless functional components per i componenti che non richiedono ganci eventi del ciclo di vita complesse o stato interno

const PieceList = ({pieces, onDeletePiece2}) => { 
    if (!onDeletePiece2) return; 
    return (
    <div className="piecesTable"> 
     {pieces.map(x => (
     <Pieces pieceData={x} onDeletePiece3={onDeletePiece2}> 
    ))} 
    </div> 
); 
}; 

---

EDIT 1: ES6

Mentre ES6 continua a diventare più prominente, può anche evitare problemi di contesto nitpicky utilizzando un ES6 arrow function.

class PieceList extends React.Component { 
    renderPiece(piece) { 
    return <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />; 
    } 
    render() { 
    if (!this.props.onDeletePiece2) return; 
    return (
     <div className="piecesTable"> 
     {this.props.pieces.map(piece => this.renderPiece(piece))} 
     <div> 
    ); 
    } 
} 

Per ottenere questo per l'esecuzione in maggior parte degli ambienti, avresti bisogno di "transpile" usando qualcosa come babel.js

---

La risposta più immediata è che avete bisogno di impegnare la corretta this al map richiamata passando this come il secondo arg

this.props.pieces.map(..., this); 

Questo potrebbe essere un modo migliore per scrivere il vostro com Ponent tho

var PieceList = React.createClass({ 

    renderPiece: function(piece) { 
    return <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} />; 
    }, 

    render: function() { 
    if (!this.props.onDeletePiece2) return; 
    return (
     <div className="piecesTable"> 
     {this.props.pieces.map(this.renderPiece, this)} 
     </div> 
    ); 
    } 
}); 

Per quanto riguarda i suoi commenti su map

var x = {a: 1, b: 2}; 

['a', 'b'].map(function(key) { 
    // `this` is set to `x` 
    // `key` will be `'a'` for the first iteration 
    // `key` will be `'b'` for the second iteration 
    console.log(this[key]); 
}, x); // notice we're passing `x` as the second argument to `map` 

uscita sarà

// "1" 
// "2" 

Notate come il secondo argomento di map possibile impostare il contesto per la funzione. Quando si chiama this all'interno della funzione, sarà uguale alla seconda variabile inviata a map.

Si tratta di nozioni di base di JavaScript e si dovrebbe assolutamente leggere su più here

Answer 2

map è solo un metodo JavaScript regolare (vedi Array.prototype.map). Si può prendere un argomento che imposta il contesto (.map(callback[, thisArg])):

var PieceList = React.createClass({ 

    render: function() { 

    var pieces; 
    if (this.props.pieces && this.props.onDeletePiece2) { 
     var pieces = this.props.pieces.map(function (piece) { 
     return (
      <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} /> 
     ) 
     }, this); // need to add the context 
    } 
    return (
     <div className="piecesTable"> 
     {pieces} 
     </div> 
    ); 
    } 
}); 

io vi suggerisco di andare indietro e leggere su this in JavaScript. Quando si passa una funzione anonima alla maggior parte dei metodi (come .map, .forEach, ecc.), Prende il contesto globale (che è quasi sempre window). Se si passa in this come ultimo argomento, poiché quello this si riferisce alla classe appena creata con React.createClass, verrà impostato il contesto corretto.

In altre parole, il modo in cui si stava tentando di farlo era l'accesso window.props, che ovviamente non esiste. Se avessi aperto la tua console per eseguire il debug, vedresti l'errore Object Window doesn't have the property "props" o qualcosa di molto offuscato.

Answer 3

Stai usando un traspolatore - qualcosa come Babel? Se è così, questo codice funziona bene:

if (this.props.pieces && this.props.onDeletePiece2) { 
    var pieces = this.props.pieces.map((piece, i) => { 
    return (
     <Piece pieceData={piece} onDeletePiece3={this.props.onDeletePiece2} key={i}/> 
    ) 
    }); 
    ... 

Se non è possibile utilizzare un transpiler, si potrebbe fare questo:

if (this.props.pieces && this.props.onDeletePiece2) { 
var that = this; 
    var pieces = that.props.pieces.map(function(piece, i) { 
    return (
     <Piece pieceData={piece} onDeletePiece3={that.props.onDeletePiece2} key={i}/> 
    ) 
    }) 

...