javascript - 对象到数组的 react

Question

我正在使用 React 并想做这样的事情:

蓝色方 block 最初隐藏和显示的位置取决于用户选择的 Colecao。因此，一些 Classes 里面有一些 Colecao，其中每个类都有“方 block ”。这是我的 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 Tab 就像我的 TabHeader，colecoes 是每个列表项，字母数组应该对应于每个列表项正方形。问题是我的 tabs 元素是一个对象，我不确定如何将它传递给 array。另外，我应该在哪里执行此操作，在我的 app.js 中并将数组作为 props 传递，或者传递对象并在我的 app.js 中转换为 array组件。

谢谢

Answer 1

使用lodash图书馆:

var arr = _.values(obj);

如果您在 app.js 中需要它用于其他目的，请在那里进行，否则没关系。