Question

我对ReactJS和react-tabs感到有些困惑。我想在React中动态创建标签及其内容。我有这个功能：

class MyLog extends React.Component{
    constructor(props){
        // Pass props to parent class
        super(props);
        // Set initial state
        this.state = {
            data: [],
            shops: [],
        }
        this.apiListUrl = '/backend/MyLog/listApi';
        this.apiStoreUrl = '/backend/MyLog/storeApi';
     }

    componentDidMount(){
        // Make HTTP request with Axios
        axios.get(this.apiListUrl)
            .then((res) => {
                // Set state with result
                this.setState({data:res.data.data});
            });

        axios.get(this.apiStoreUrl)
            .then((res) => {
                // Set state with result
                this.setState({shops:res.data.data});
            });
    }

    render(){
        // Render JSX
        return (
            <div>
                <Title />
                <ReactTabs.Tabs>
                    <ReactTabs.TabList>
                        <ReactTabs.Tab>Title 1</ReactTabs.Tab>
                    </ReactTabs.TabList>
                    <ReactTabs.TabPanel>Contents 1</ReactTabs.TabPanel>
                </ReactTabs.Tabs>
            </div>
        );
    }
}

在this.data.shops中是具有以下结构的数据

0: "testStore"
1: "testStore2"

我希望实现结果：

<ReactTabs.TabList>
       <ReactTabs.Tab>testStore</ReactTabs.Tab>
       <ReactTabs.Tab>testStore2</ReactTabs.Tab>
</ReactTabs.TabList>

但是如何根据this.state.shops？

中的数据动态创建这两个标签

Answer 1

您只需要显示动态生成的组件列表，不能在纯JSX中执行此操作。

执行此操作的最简洁方法如下：

<ReactTabs.TabList>
       { this.state.shops.map(shop => <ReactTabs.Tab>{shop}</ReactTabs.Tab>) }
</ReactTabs.TabList>

Answer 2

您可以根据列表返回标签，如：

    render(){
            // Render JSX
            return (
                <div>
                    <Title />
                    <ReactTabs.Tabs>
                    <ReactTabs.TabList>
                        {this.bindTabs()}
                    </ReactTabs.TabList>       
                       <ReactTabs.TabPanel>Contents 1</ReactTabs.TabPanel>
                    </ReactTabs.Tabs>
                </div>
            );
        }

    bindTabs(){
    return yourDataList.map(item)=>{
   <ReactTabs.Tab>item.title</ReactTabs.Tab>
    }
    }

bindTabs方法将逐个返回yourDataList的所有值。

由于

ReactJS - 如何动态创建标签？

2 个答案: