Javascript 对象对数组的反应

我使用React，想做如下事情：

蓝色方块最初隐藏的位置，并根据用户选择的

Colecao

显示。因此，一些

类

和一些

Colecao

在其中每个类都有“正方形”。这是我的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;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
activeTab:'类别1'，
选项卡：[
{
tituloTab:‘1级’，
科尔科：[{
“科尔曹1号”：[
“A”、“B”、“C”、“D”
],
“科尔曹2号”：[
“A”、“B”、“C”、“D”、“E”
],
}]
},
{
tituloTab:‘2级’，
科尔科：[{
“科尔曹1号”：[
“A”、“B”、“C”、“D”
],
“科尔曹2号”：[
“A”、“B”、“C”、“D”、“E”
],
}]
},
{
tituloTab:‘3级’，
科尔科：[{
“科尔曹1号”：[
“A”、“B”、“C”、“D”
],
“科尔曹2号”：[
“A”、“B”、“C”、“D”、“E”
],
“科尔曹3号”：[
“A”、“B”、“C”
],
}]
},
{
tituloTab:‘4级’，
科尔科：[{
“科尔曹1号”：[
“A”、“B”、“C”、“D”
],
“科尔曹2号”：[
“A”、“B”、“C”、“D”、“E”
],
“科尔曹3号”：[
“A”、“B”、“C”
],
“科尔曹4号”：[
“A”、“B”、“C”、“D”、“E”、“F”
],
}],
}
],
拇指指甲图标：[
{
Titulothumbail:“Costas”，
纹理：['A'，'B'，'C'，'D']，
}
],
科勒曹塞利科纳达：
'',
切换Thumbnails选项：
假,，
};
}
更改活动选项卡（选项卡）{
this.setState（{activeTab:tab}）；
}
activeTabContent（）{
const activeIndex=this.state.tabs.findIndex（（tab）=>{
return tab.tituloTab==this.state.activeTab；
}
);
返回此.state.tabs[activeIndex].colecoes；
}
无柄水蚤{
this.setState（{colecosesseleconadas:colecao}，（）=>{
this.setState（{toggleThumbNailsCollecoes:true}）
}
)
}
render（）{
返回(
);
}
}
导出默认应用程序；

我的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;

类选项卡扩展组件{ render（）{ 返回(

---

{//应该得到每个“Colecao”的缩略图 这个。道具。切换缩略图 ? ：null } ) } } 导出默认选项卡； 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;

类选项卡内容扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(

{this.props.colecoes.map（（列表）=>{
return

this.props.addColecao（列表）}>
{list}//应获取“Colecao”的列表

}
)}

)
}
}
导出默认选项卡内容；

titulo

选项卡类似于我的

TabHeader

，

colecoes

是每个列表项，字母数组应该对应于每个方块。问题是，我的

选项卡

元素是一个对象，我不知道如何将其传递给

数组

。另外，在我的

app.js

中，我应该在哪里执行此操作，并将数组作为

props

传递，或者在我的组件上传递对象并转换为

array

谢谢使用图书馆：

---

如果您在app.js中出于其他目的需要它，请在app.js中进行转换，否则无所谓。

如果您将在多个位置使用数组值，则在

app.js中进行转换并将数组传递到需要的位置最有意义

如果只在一个组件中使用数组值，只需将对象传递给它，并让它执行
app.js
不需要关心的任何操作

至于将一个对象转换为一个数组，有很多方法可以做到这一点，这取决于您的特定用例。看看您的示例，看起来
选项卡
已经是一个数组了。。。我在这里遗漏了什么吗？
是的，它是一个数组，但它作为一个带键的对象传递，对吗？有可能我是第一次处理这个问题时遗漏了什么…只要将数组传递到组件中所需的任何函数中，并在其中循环。。。这应该行得通，我不明白为什么不行。JavaScript中的所有内容都是隐藏的“对象”，因此从这个意义上说，是的，您的数组是一个
var arr = _.values(obj);