2016-12-19 59 views
3

我找不出爲什麼我沒有爲我的CompanyLink組件獲取任何渲染組件。好像在這裏,當我嘗試設置項爲<ListItem />,它不會因爲某些原因似乎是實際渲染列表項組件的內容:某些組件的不渲染

var item = <ListItem company={company} />; 

我這推到列表數組:

if(company){list.push(item)}; 

那麼,在年底我把名單到最終的名單稱爲formattedCompanies:

formattedCompanies.push(
         <div key={company.id}> 
          <ListHeader company={company} country={country}/> 
          <div> 
           <List list={list} country={country}/> 
          </div> 
         </div>); 

然後在結束時,組件返回格式化的公司名單渲染:

return(<span>{formattedCompanies}</span>); 

問題:當所有說的和做的<Lists />組件它只返回,由於某種原因並未使{list}裏{list}裏

CompanyList.js

const CompanyList = Component({ 
    store: Store('/companies'), 
    render(){ 
     const companies = this.store.value(), 
       countries = this.props.countries; 

     return (
      <div className="ft-companies padding-top-20"> 
       <div className="column-group"> 
        <div className="all-100"> 
         <p className="section-heading bold padding-top-20 font-22">Companies that TDD - Interviewed</p> 
         <div> 
          <Lists countries={countries} companies={companies}/> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}); 

const Lists = Component({ 
    render(){ 
     var link, 
      list = [], 
      companies = this.props.companies, 
      countries = this.props.countries; 

     if(companies && countries && countries.length > 0){ 

      for (let country of countries) { 
       var companiesByCountry = []; 
        companiesByCountry = findCompaniesByCountry(country.name, companies); 

       if (country && country.name != "USA") { 
        link = <div key={country.id} className="inline-block ft-companies-other"> 
          <CompanyLinks country={country} companies={companiesByCountry} /> 
          </div> 

        list.push(link); 
       } 
      } 
     } 

     return (<div>{list}</div>); 
    } 
}); 

const ListItem = Component({ 
    render(){ 
     var company = this.props.company, 
      link = <Link to={`/interviews/companies/${company.id}`} 
        id={company.id} 
        className="margin-top-10 margin-bottom-10" 
        ref="link"> 
        {company.name} 
        </Link> 

     return(<li>{link}</li>); 
    } 
}); 

const List = Component({ 
    render(){ 
     var country = this.props.country, 
      cssClass = "ft-company-" + country.name, 
      links = this.props.links; 

     return (<ul className={cssClass}>{links}</ul>); 
    } 
}); 

const ListHeader = Component({ 
    render(){ 
     var company = this.props.company, 
      country = this.props.country; 

     return(
      <div className="margin-right-30 ft-company-header"> 
       <img src={(company.images && company.images.flag) ? company.images.flag : ""} 
        className="padding-right-5 vertical-align-middle"/> 
       <span className="bold">{country.name}</span> 
      </div> 
     ) 
    } 
}); 

const CompanyLinks = Component({ 
    splitToInlineList: function (list){ 
     return <div className="inline-block margin-right-50">{list}</div>; 
    }, 

    render(){ 
     var country = this.props.country, 
      companies = this.props.companies; 

     if(companies){ 
      var formattedCompanies = [], 
       list = []; 

      for(let company of companies){ 
       var item = <ListItem company={company} />; 

       if(company){list.push(item)}; 

       if(country.name != "USA") { 
        formattedCompanies.push(
         <div key={country.id}> 
          <ListHeader company={company} country={country}/> 
          <div> 
           <List list={list} country={country}/> 
          </div> 
         </div>); 
       } 
      } 
     }; 

     return(<span>{formattedCompanies}</span>); 
    } 
}); 

function findCompaniesByCountry(countryName, companies){ 

    var companies = companies.filter((company, i) => company 
     .locations.filter(location => location.country.name === countryName && location.primary) 
     .length > 0 && company.active); 

    companies = companies.sort(function(a, b) { 
     if (a.name < b.name) return -1; 
     if (a.name > b.name) return 1; 
     return 0; 
    }); 

    return companies; 
} 

export default CompanyList; 

除此警告外,我沒有收到任何錯誤:

flattenChildren(...): Encountered two children with the same key, `1`. Child keys must be unique; when two children share a key, only the first child will be used. 

我不認爲這與我的問題有任何關係。我只是想知道,如果我在這裏有一些我看不到的語法錯誤...不確定這裏有什麼問題,我找不到它。

+1

您可以編輯您的** **的問題部分。我想你跳過了幾句話 – Swapnil

回答

2

這只是錯誤的,屬性命名 - 您的List組件需要財產links

const List = Component({ 
    ... 
     links = this.props.links 
     return (<ul className={cssClass}>{links}</ul>); 
    } 
}); 

而你給它list

<List list={list} country={country}/> 
+0

謝謝我失明瞭。我知道這是愚蠢的,我看不到。 – PositiveGuy