React и рендеринг класса

257
26 февраля 2017, 07:23

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

Answer 1

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

const App = () => (
  <div style={{ display: 'flex' }}>
    <MenuExample />
    <Component />
  </div>
);
ReactDOM.render(<App />, document.getElementById('mount'));
READ ALSO
html шаблон, вывести данные из запроса в БД

html шаблон, вывести данные из запроса в БД

Покажите пожалуйста простой пример, как из запроса к базе данных, вывести результат в таблицу html шаблонаПишу на golang

278
Исполнение onclick события для нескольких элементов

Исполнение onclick события для нескольких элементов

Необходимо одним кликом заставить сработать событие onclick на нескольких элементахОсновная проблема в том, что использовать средства JS для...

253
Как работать с сокетами в UWP (server/client)

Как работать с сокетами в UWP (server/client)

Как в UWP (universal windows platform) работать с сокетами? Есть документация Microsoft:

325
Перебрать несколько коллекций в одном foreach [требует правки]

Перебрать несколько коллекций в одном foreach [требует правки]

Не очень понятно, что ты хочешь перебирать и как, но вообще в C# есть такая вещь как LINQ, советую почитатьБудет что-то в духе:

212