Javascript 一些组件'；这不是渲染

我不明白为什么我没有为我的公司链接组件获取任何渲染组件。在这里，当我尝试将项设置为

时，出于某种原因，它似乎没有实际呈现ListItem组件的内容：

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

最后，我将该列表推到一个名为FormattedCompanys的最终列表中：

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

---

我认为这与我的问题无关。我只是想知道我是否有一些语法错误，我只是看不见…我不确定这里出了什么问题，我找不到它。

只是属性命名错误-您的

列表
组件需要属性
链接
：

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

你能编辑你的问题部分吗。我想你漏掉了几个词谢谢我是瞎子。我知道这是我看不见的蠢事。
return(<span>{formattedCompanies}</span>);

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.

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

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