我找不出爲什麼我沒有爲我的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.
我不認爲這與我的問題有任何關係。我只是想知道,如果我在這裏有一些我看不到的語法錯誤...不確定這裏有什麼問題,我找不到它。
您可以編輯您的** **的問題部分。我想你跳過了幾句話 – Swapnil