일부 구성 요소가 렌더링되지 않음

Question

왜 내 CompanyLink 구성 요소에 렌더링 된 구성 요소가 나타나지 않는지 알 수 없습니다. 나는 <ListItem />에 항목을 설정하려고 할 때, 어떤 이유로 실제로하여 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 /> 구성 요소를 수행 할 때 그것은 단지 {목록}에서를 반환하고 어떤 이유로 {목록} 렌더링하지 않습니다

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. 

나는 내 문제와 관련이 없다고 생각합니다. 나는 단지 내가 볼 수없는 잘못된 구문을 가지고 있는지 궁금 할 것입니다 ... 여기에 무엇이 잘못되었는지는 확실치 않습니다. 찾을 수 없습니다.

Answer 1

그냥 잘못된 속성 이름입니다 - 당신의 List 구성 요소 속성 links 기대 :

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

을 그리고 당신은 그것을 list를 제공하고 있습니다 :

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