1

Доброго времени суток! В небольшом веб-приложении на 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 ? Чем это можно сделать ? Спасибо.

1 ответ 1

1

Вы суть немного не поняли. render вызывается для корневого компонента, одного и один раз чаще всего... Объеденить 2 компонента можно так...

const App = () => (
  <div style={{ display: 'flex' }}>
    <MenuExample />
    <Component />
  </div>
);

ReactDOM.render(<App />, document.getElementById('mount'));
1
  • Спасибо, попробую так сделать.
    – Andrew
    Commented 25 февр. 2017 в 22:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.