我正在使用React，并想要做类似于这样的事情：
蓝色方块最初是隐藏的，取决于用户选择哪个 Colecao，它们会显示出来。因此，一些带有一些 Colecao 内容的 Classes，每个都有“方块”。这是我的 app.js：
class App extends Component {
constructor(props) {
super(props);
this.state = {
activeTab: 'Classe 1',
tabs: [
{
tituloTab: 'Classe 1',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
}]
},
{
tituloTab: 'Classe 2',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
}]
},
{
tituloTab: 'Classe 3',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
'Colecao 3': [
'A', 'B', 'C'
],
}]
},
{
tituloTab: 'Classe 4',
colecoes: [{
'Colecao 1': [
'A', 'B', 'C', 'D'
],
'Colecao 2': [
'A', 'B', 'C', 'D', 'E'
],
'Colecao 3': [
'A', 'B', 'C'
],
'Colecao 4': [
'A', 'B', 'C', 'D', 'E', 'F'
],
}],
}
],
ThumbnailsColecoes: [
{
tituloThumbnail: 'Costas',
texturas: ['A', 'B', 'C', 'D'],
}
],
colecaoSelecionada:
'',
toggleThumbnailsColecoes:
false,
};
}
changeActiveTab(tab) {
this.setState({activeTab: tab});
}
activeTabContent() {
const activeIndex = this.state.tabs.findIndex((tab) => {
return tab.tituloTab === this.state.activeTab;
}
);
return this.state.tabs[activeIndex].colecoes;
}
adicionarColecaoSelecionada(colecao) {
this.setState({colecoesSelecionadas: colecao}, () => {
this.setState({toggleThumbnailsColecoes: true})
}
)
}
render() {
return (
<div className={"container is-fluid"}>
<TabsArea
activeTab={this.state.activeTab}
tabList={this.state.tabs}
changeActiveTab={this.changeActiveTab.bind(this)}
colecoes={this.activeTabContent()}
addColecao={this.adicionarColecaoSelecionada.bind(this)}
colecoesThumbnails={this.state.ThumbnailsColecoes}
toggleThumbnails={this.state.toggleThumbnailsColecoes}/>
</Options>
</section>
</div>
);
}
}
export default App;
我的tabsArea.js
class TabsArea extends Component {
render() {
return (
<div className={["section", "tabsArea"].join(' ')}>
<TabsHeader
activeTab={this.props.activeTab}
tabList={this.props.tabList}
changeActiveTab={this.props.changeActiveTab}
/>
<TabContent
key={this.props.activeTab}
colecoes={this.props.colecoes}
addColecao={this.props.addColecao}/>
<hr/>
{//should get the Thumbnails for each "Colecao"
this.props.toggleThumbnails
? <ThumbnailAreas
thumbnailAreas={this.props.colecoesThumbnails}>
</ThumbnailAreas>
: null
}
</div>
)
}
}
export default TabsArea;
tabContent.js
class TabContent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ul className={"uList"}>
{this.props.colecoes.map((list) => {
return <li className={"li"}>
<a className={"has-text-black"}
onClick={() => this.props.addColecao(list)}>
{list} //should get the list of "Colecao"
</a>
</li>
}
)}
</ul>
</div>
)
}
}
export default TabContent;
titulo 标签就像我的 TabHeader，colecoes 是列表项中的每一个，字母数组应该对应每个方块。问题是我的 tabs 元素是一个对象，我不确定如何将其传递给一个 array。另外，我应该在我的 app.js 中进行，并将数组作为 props 传递，还是将对象传递并在组件上转换为 array。
谢谢