reactjs-将组件呈现为HTML内部函数

Question

我是reactjs的新手，我正在尝试使用component标签并在函数调用中呈现HTML。但是我不知道这是否可行或建议。这是代码：

import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { connect } from 'react-redux'
import Table from '../components/tables/Table'
import CheckBox from '../components/inputs/CheckBox'
import { setMockUserTable } from '../redux/actions/userActions'

class UserDashboard extends Component {
  constructor (props, context) {
    super(props, context)

    this.state = {
      mockUsers: [],
      mockUserTable: []
    }
  }

  render () {
    return (
      <div>
        <b>as</b>
        <Table rows={this.props.mockUserTable} columns={['userId', 'forename', 'surname', 'disable user']} />
      </div>
    )
  }
}

const mapStateToProps = state => {
  state.mockUserTable = [...state.user.mockUsers]

  const checkBoxCtrl = renderToString(<CheckBox />)

  state.mockUserTable.map((item, index) => {
    state.mockUserTable[index].disableUser = checkBoxCtrl
  })

  setMockUserTable(state.mockUserTable)

  return {
    mockUsers: state.user.mockUsers,
    mockUserTable: state.mockUserTable
  }
}

export default connect(mapStateToProps)(UserDashboard)

我试图将一个复选框元素添加到数组，然后将其传递给通用表组件。

这是我的通用表组件：

import React from 'react'

const table = (props) => {
  return (
    <div className='table-container'>
      <table className='boxer' width='100%' >
        <tbody>
          <tr>
            {
              props.columns.map((column, index) => {
                return <th key={index} className='table-entry table-title'>{column}</th>
              })
            }
          </tr>
          {
            props.rows.map((row, rowIndex) => {
              return (
                <tr key={rowIndex}>
                  {
                    props.columns.map((column, columnIndex) => {
                      return (
                        <td key={columnIndex}>{row[column]}</td>
                      )
                    })
                  }
                </tr>
              )
            })
          }
        </tbody>
      </table>
    </div>
  )
}

export default table

您可以在TD中看到该复选框为空。谁能提供一些帮助/反馈？