ReactJS-如何动态创建标签？

Question

I am bit stuck with ReactJS and react-tabs. I want to dynamically create tabs and their contents in React. I have this function:

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>
        );
    }
}

In this.data.shops is the data with the following structure

0: "testStore"
1: "testStore2"

I want to achieve that the results are:

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

But how can I create these two tabs dynamically on basis of the data in this.state.shops ?

Answer 1

You just need to display a list of dynamically generated components, you can't do this in pure JSX.

The most concise way for doing this is the following:

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

Answer 2

You can return the tabs based on your list like:

    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 method will return all the value from yourDataList one by one.

Thanks