SOURCE

const { useState, useEffect } = React;

function RowList(props) {
    const {dataList,columnList,loadMore} = props
    console.log("data==",dataList)
    // 你的代码
   return (
    <div>
        <table border="2px">
            <tr>
            {
                columnList.map(item=>{
                    return (
                         <td key={item.id}>{item.label}</td>
                    )
                })
            }
            </tr>
            {
                dataList.map(item=>{
                   return(
                    <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.phone}</td>
                    </tr>
                   ) 
                })
            }
        </table>
        <div onClick={loadMore()}>  加载更多  </div>
    </div>
   )
    // return 'RowList组件'
}


function App() {
    const [dataList, setDataList] = useState([])
    const [selectedArr, setSelectedArr] = useState([])
    const [columnList, setColumnList] = useState([
        {
            index: 'id',
            label: 'ID'
        },
        {
            index: 'name',
            label: '名称'
        },
        {
            index: 'phone',
            label: '手机号'
        },])
    useEffect(() => {
        loadData()
    }, [])

    function onSelect(e) {
        setSelectedArr(e)
    }
    function loadMore(currentLen) {
        loadData(currentLen)
    }
    async function loadData(currentLen = 0) {
        const res = await mockData(currentLen)
        setDataList([...dataList, ...res])
    }
    // mock数据，不要修改此函数
    function mockData(currentIndex = 0, LEN = 100) {
        return new Promise((resolve, reject) => {
            try {
                const res = []
                for (let i = currentIndex; i < currentIndex + LEN; i++) {
                    res.push({
                        id: `id-${i}`,
                        name: `名称-${i}`,
                        phone: 13333333333 + i
                    })
                }
                resolve(res)
            } catch (e) {
                reject(e)
            }
        })
    }
    return (
        <div>
            <RowList dataList={dataList} columnList={columnList} onSelect={(e) => onSelect(e)} loadMore={(e) => loadMore(e)}></RowList>
            {selectedArr.map(e => <span style={{ marginRight: '4px' }}>{e.id}</span>)}
        </div>)

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>

td{
    margin-right: 10px
}