Question

我正在使用React并希望做这样的事情：

最初隐藏蓝色方块并根据用户选择的Colecao显示蓝色方块。因此，一些Classes内部有一些Colecao，其中每个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;都有“正方形”。这是我的app.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;

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

tabContent.js

titulo

TabHeader标签就像我的colecoes，tabs是每个列表项之一，字母数组应对应每个方格。问题是我的array元素是一个对象，我不知道如何将它传递给app.js。另外，我应该在props的哪个位置执行此操作，并将数组作为array传递或传递对象并转换为我的组件上的{{1}}。

由于

Answer 1

使用lodash库：

var arr = _.values(obj);

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

Answer 2

如果您将在多个位置使用数组值，那么在app.js中进行转换最有意义，并将数组传递到需要的位置。

如果你只在一个组件中使用数组值，只需将对象传递给它，让它做任何app.js都不应该关心的事情。

至于将对象转换为数组，有很多方法可以做到这一点，这取决于您的具体用例。看看你的例子，看起来tabs已经是一个数组......我在这里错过了一些东西吗？

对象到数组的反应

2 个答案: