如何渲染只有一個生成的孩子的子組件反應

在React應用程序中，我有一個組件顯示名爲ResultsContainer的搜索結果。我通過映射從父項傳遞的道具並從數組中的每個項目創建列表元素來生成子項。這些孩子中的每一個都有一個我（DetailsContainer）想要在單擊按鈕時渲染的組件，並且僅用於點擊了按鈕的孩子。截至目前，該組件呈現給所有這些孩子。我不知道如何定位個別孩子，以便該組件僅針對該特定的孩子進行渲染。如何渲染只有一個生成的孩子的子組件反應

ResultsContainer：

var React = require('react'); 
var DetailsContainer = require('./DetailsContainer.jsx'); 

var ResultsContainer = React.createClass ({ 
    render: function() { 
    var queryType = this.props.queryType; 
    var details = this.props.details; 
    var that = this; 

    if (this.props.results == null) { 
     var searchResult = "Enter search terms" 
    } else { 
     var searchResult = this.props.results.map(function(result, index){ 
     //if artist search 
     if (queryType == "artist") { 
     if (result.type == "artist") { 
      return <li className="collection-item" key={index}> {result.title} <button onClick={that.props.handleDetailClick}>Get details</button> <DetailsContainer details={details} /> </li> ; 
     } 
     } 
     }); 
    }; 

    return (
     <div className="collection"> 
     {searchResult} 
     </div> 
    ); 
    }, 
}); 

module.exports = ResultsContainer;

當單擊該按鈕時，我想渲染爲獨生子女的，不是所有的DetailsContainer組件。我怎麼能這樣做？

DetailsContainer：

var React = require('react'); 

var DetailsContainer = React.createClass({ 

    render: function(){ 
    if (this.props.details !== null) { 
     var detailsDisplay = "deets" 
    } 
    return (
     <div className="detailsDisplay"> 
      {detailsDisplay} 
     </div> 
    ); 
    }, 

}); 

module.exports = DetailsContainer;

這裏是handleDetailClick從父作爲道具被向下傳遞函數：

handleDetailClick: function() { 
    this.setState({details: "details"}); 
},

此外，在ResultsContainer，我無法弄清楚如何使用.bind （）能夠在.map的回調函數中使用this.props.handleDetailClick，所以我只是創建了一個變量「that」，並將它設置爲等於函數外部的「this」。這是不好的做法嗎？使用.bind（）做正確的方法是什麼？非常感謝。

來源

2015-11-23 John Hess

你可以傳遞'index'到'handleDetailClick'嗎？這能夠識別孩子嗎？ 'onClick = {that.props.handleDetailClick（index）}'或'onClick = {that.props.handleDetailClick（result）}'。 Angular做到了;不知道這個框架。 – toddmo

首先關閉地圖有一個選項可以通過這個。 map（函數（item）{}，this）;您至少有兩個選項來限制列表。一個是像這樣使用狀態;

render() { 
 
    let useList; 
 
    if (this.state.oneSelected) 
 
    useList = this.props.list[this.state.oneSelected]; 
 
    else 
 
    useList = this.props.list; 
 
    let useListing = useList.map(function(item){}, this); 
 
    return ({useListing}) 
 
}

另一個選項是選擇的項目僅僅是一個項目傳遞給父this.props.selectOne（item.id），並有家長回報爲列表。

來源

2015-11-23 22:23:58

如何渲染只有一個生成的孩子的子組件反應

回答

相關問題