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 />组件时，它只会返回并且由于某种原因不会在{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.

我认为这与我的问题没有任何关系。我只是想知道我是否有一些语法错误，我只是看不到...不确定这里有什么问题，我找不到它。

Answer 1

错误的属性命名 - 您的List组件需要属性links：

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

你正在给它list：

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

某些组件无法渲染

1 个答案: