Доброго времени суток! В небольшом веб-приложении на React создал два класса, один - меню навигации, второй - вывод формы редактирования сущности (сотрудника). Никак не могу скомпоновать так, что бы меню слева находилось, а форма редактирования - правее или по центру. Код рендеринга класса меню.
render: function() {
....
return (
<div className="left-widget">
<ul> {
Menu.map(function(m, index){
var style = '';
if (self.state.focused == index && m.sub) {
style = 'focused';
return <Content firstName={Menu[index].firstName} lastName={Menu[index].text} iddep={Menu[index].iddep} id={Menu[index].id} />
};
if (m.sub){
return <li className={style} key={index} onClick= {self.clicked.bind(self, index)}>{m.text}</li>}
else{}
return <li key={index} onClick={self.clicked.bind(self, index)}><b>{m.text}</b></li>;
}) }
</ul>
</div>
); // return
} // render
Код вывода контента.
render: function() {
return (
<div className="content">
<p></p>
<p><b>Редактирование {self.state.last_}</b></p>
<p><label>id department</label></p><p><input type="text" value={self.state.iddep_} onChange={this.handleChangeId} /> </p>
<p><label>first name</label></p><p><input type="text" value={self.state.first_} onChange={this.handleChangeFirst}/></p>
<p><label>last name</label></p><p><input type="text" value={self.state.last_} onChange={this.handleChangeLast}/></p>
<p><button onClick={this.clicked.bind()}>Изменить</button></p>
<p></p>
</div>
); // return
} // render
Никак не могу настроить вывод контента визуально отделить от меню, контент жестко выводится в div меню, не помогает даже явный
ReactDOM.Render(<Component />, document.getElementById("content"));
Для меню вызывается
ReactDOM.render(<MenuExample />, document.getElementById("left_widget"));
Как нормально настроить вывод класса Content ? Чем это можно сделать ? Спасибо.