jak uzyskać dostęp do obiektów vairables poza funkcją map w js i jsx w komponencie reagowania

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> 
    ); 
    } 
}); 

Jestem zaskoczony, jak to uruchomić. Problem polega na tym, że {this.props} nie jest dostępny w funkcji mapy.

Czy foreach byłby lepszy? stumped, pls halp!

Answer 1

EDIT 2: React 0.14.x

Teraz można definiować stateless functional components komponentów, które nie wymagają skomplikowanych haków cyklu zdarzeń lub stan wewnętrzny

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

---

EDIT 1: ES6

W miarę jak ES6 staje się coraz bardziej widoczny, może również uniknąć problemów z kontekstem nitpicky za pomocą 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> 
    ); 
    } 
} 

Aby uzyskać to do pracy w większości środowisk, trzeba by „transpile” go przy użyciu coś jak babel.js

---

Szybka odpowiedź jest taka, że ​​trzeba wiązać prawidłowego this do map zwrotna przekazując this jako drugi arg

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

To może być lepszy sposób napisać com składową 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> 
    ); 
    } 
}); 

Odnośnie komentarz o 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` 

wyświetli

// "1" 
// "2" 

Wskazówki jak drugi argument do map można ustawić kontekst dla tej funkcji. Po wywołaniu funkcji this będzie ona równa drugiej zmiennej, która została wysłana do map.

To podstawy JavaScriptu i powinno się przeczytać więcej here

Answer 2

map jest zwykłym sposobem JavaScript (patrz Array.prototype.map). To może trwać argument, który ustawia kontekst (.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> 
    ); 
    } 
}); 

Proponuję udać się z powrotem i czytanie o this w JavaScript. Po przekazaniu anonimowej funkcji do większości metod (takich jak .map, .forEach itd.), Następuje kontekst globalny (który prawie zawsze jest wartością window). Jeśli jako ostatni argument zostanie przekazany this, ponieważ to this odnosi się do klasy, którą właśnie utworzyłeś przy pomocy React.createClass, ustawi prawidłowy kontekst.

Innymi słowy, sposób staraliśmy się zrobić to był dostęp window.props, co oczywiście nie istnieje. Ja bym po otwarciu konsoli do debugowania, którą widzisz błąd Object Window doesn't have the property "props" lub coś bardzo ukrywane.

Answer 3

Używasz transpiler - coś jak Babel? Jeśli tak, to kod będzie działał prawidłowo:

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}/> 
    ) 
    }); 
    ... 

Jeśli nie można użyć transpiler, można to zrobić:

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}/> 
    ) 
    }) 

...