ReactJS + Material-UI:如何在每个TableRow中使用Material-UI的FlatButton和Dialog？

import React, { Component } from 'react'
import {
  Subheader,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
} from 'material-ui'

import RenderedTableRow from ‘./RenderedTableRow'

export default class MainTable extends Component {
  constructor() {
    super()
  }

  render() {

    return (
      

        

        Table
          

渲染表行:

import React, { Component } from 'react'

import { Dialog, FlatButton, Tabs, Tab,  TableRow, TableRowColumn } from 'material-ui'
import ContentAdd from 'material-ui/svg-icons/content/add';

export default class RenderedTableRow extends Component {
  constructor(props) {
    super(props)

    this.state = {
      open: false,
    }

    this._handleOpen = this._handleOpen.bind(this)
    this._handleClose = this._handleClose.bind(this)
  }

  _handleOpen() {
    this.setState({
      open: true
    })
  }

  _handleClose() {
    this.setState({
      open: false
    })
  }

  render() {
    const {
      children,
      ...rest
    } = this.props

    const actions = [
      ,
    ]

    return (
      
        {children[0]}
        Red
        John, Joshua
        
          }
            onClick={this._handleOpen}
          />
        

        

            
              
                

                  
Tab One
                  

                    This is an example tab.
                  
                
              

              
                

                  
Tab Two
                  

                    This is another example tab.
                  
                
              

            
        
      
    )
  }
}

提前谢谢你,并接受/ upvote回答.