index.js

	function renderDirectories(directories,pKey,onClick){
		if(!directories || !directories.length){return false;}
		return directories.map((directory,key)=>{
			const {
				name
			,	directories
			,	files
			} = directory;

			return renderNotRoot(
				name
			,	directories
			,	files
			,	pKey+key
			,	onClick
			)
		})
	}

	function renderFiles(files,pKey){
		if(!files || !files.length){return false;}
		return files.map((file,key)=>
			<tr key={pKey+key}>
				<td>{file}</td>
			</tr>
		)
	}

	function renderNotRoot(name,directories,files,key,onClick){
		return [
			<tr 
				key={key+'head'} 
				ref={key} 
				onClick={onClick(key)}
			>
				<td>{name}</td>
			</tr>
		].concat(
			renderDirectories(directories,key)
		).concat(
			renderFiles(files,key)
		)
	}

	function renderRoot(name,directories,files,onClick){
		return (<table name={name}>
			<thead><tr><td>{name}</td></tr></thead>
			<tbody>
				{renderDirectories(
					directories
				,	'root'
				,	onClick
				)}
				{renderFiles(files,'root')}
			</tbody>
		</table>)			
	}

	class Root extends Component{
		handleClick = (ref) =>{
			return (evt)=>{
				const node = this.refs[ref];
				//do something
			}
		}
		render(){
			const {name,directories,files} = this.props;
			const onClick = this.handleClick
			return renderRoot(name,directories,files,onClick)
		}
	}

result.html

	<table name="Root">
		<thead>Root</thead>
		<tbody>
			<tr><td>DirA</td></tr>
			<tr><td>DirB</td></tr>
			<tr><td>dirA/dirB/fileA</td></tr>
			<tr><td>dirA/dirB/fileB</td></tr>
			<tr><td>dirA/fileA</td></tr>
			<tr><td>rootFile</td></tr>
		</tbody>
	</table>