Почему ‹Таблица/› не показывает флажок при многократном отображении?

Я использую <Table/> из http://www.material-ui.com/#/components/table . Когда я визуализирую <TableRowColumn/> несколько раз в зависимости от того, сколько объектов находится в массиве, флажки не появляются. Например, если есть два объекта, отображаются две строки, но флажки не отображаются. В чем может быть проблема?

СОВЕРШЕННО НОВОЕ РЕДАКТИРОВАНИЕ

Таким образом, FileTable.js отображается на другой странице и запускается с помощью кнопки внутри индексного маршрута Home.js.

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={RequireAuth(App)}
          path='App'
        >
          <IndexRoute
            component={Home}
          />
          <Route
            component={FileTable}
            path='/FileTable'
          />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

И App.js это:

class App extends Component {

  render() {

    return (
        <div>
          {React.cloneElement(this.props.children, this.props)}
        </div>
    );
  }
}

Я точно следовал тому, как вы реализовали, и получил правильное свойство queryVehicles, но когда я нажал кнопку на Home.js, я получил следующую ошибку:

введите здесь описание изображения


person Jo Ko    schedule 31.08.2016    source источник
comment
Вы видите какую-либо ошибку в консоли? Можете ли вы показать отрывок из данных строки?   -  person Pandaiolo    schedule 31.08.2016
comment
@Pandaiolo Ошибок нет, но я получил предупреждения. Не уверен, что это проблемы, потому что они обычно появляются с Material-UI, но не вызывают никаких проблем. Обновлен исходный пост с предупреждениями и выдержкой из данных строки.   -  person Jo Ko    schedule 31.08.2016
comment
@Pandaiolo Пожалуйста, дайте мне знать, если у вас была возможность увидеть комментарий   -  person Jo Ko    schedule 01.09.2016
comment
Используете ли вы последние версии react и material-ui? Предупреждение, похоже, связано с вашей проблемой, вы должны исследовать ее, чтобы решить.   -  person Pandaiolo    schedule 01.09.2016
comment
@Pandaiolo Как мне обновиться до последней версии?   -  person Jo Ko    schedule 09.09.2016
comment
npm view material-ui для просмотра доступных версий, npm list material-ui для просмотра установленной версии, npm install -S material-ui@^0.15.4 для установки последней стабильной версии от 10 октября 2016 г. (скоро будет 0.16.0)   -  person Pandaiolo    schedule 10.09.2016


Ответы (2)


Судя по предупреждениям браузера, которые вы получаете, похоже, что у вас есть отдельный компонент React, инкапсулирующий TableRow ("FileTableRow").

Когда вы повторяете некоторые данные в TableBody, вы увидите различное поведение между использованием встроенного TableRow (как в вашем фрагменте кода) и отдельного компонента (например, <FileTableRow />) в отношении поведения флажка.

С текущей реализацией TableBody и TableRow, если вы хотите иметь отдельный компонент FileTableRow, вам нужно иметь его следующим образом, чтобы появился флажок.

const FileTableRow = (props) => {
  const { children, Date, Start_Time, End_Time, Type, ...rest } = props

  // The checkbox element will be inserted by the <TableBody> as a child
  // of this component. So if we have a separate row component like this,
  // we need to manually render it from the props.children

  // We also use {...rest} to pass any other props that the parent <TableBody />
  // passed to this component. This includes any handlers for the checkbox.
  return (
    <TableRow {...rest}>
      {children[0]}
      <TableRowColumn>{Date}</TableRowColumn>
      <TableRowColumn>{Start_Time}</TableRowColumn>
      <TableRowColumn>{End_Time}</TableRowColumn>
      <TableRowColumn>{Type}</TableRowColumn>
    </TableRow>
  )
}

Кроме того, предупреждения звучат так, как будто вы заключаете компоненты <TableRow /> в <div />, чего следует избегать.

Редактировать:

Добавлено использование {...rest} для передачи любых других реквизитов в <TableRow>.

Добавлен рабочий пример по адресу: http://www.webpackbin.com/4kNnhM2o-.

Редактировать 2:

Добавлен модифицированный пример, который, кажется, более точно соответствует структуре данных запрашивающего. http://www.webpackbin.com/VkuA-FbhZ

Редактировать 3:

Сделан компонент с отслеживанием состояния для захвата и регистрации выбранных строк. Из-за некоторых особенностей реализации Table необходимо было превратить Table в управляемый компонент. http://www.webpackbin.com/EyhKEDNhb

person lawls544    schedule 01.09.2016
comment
Извините, но прежде чем я приму ответ и поддержу его, не могли бы вы показать с .map, с передачей реквизитов компоненту FileTableRow? Я пытался, но не могу понять логику и заставить ее работать. - person Jo Ko; 09.09.2016
comment
Также я временно заставил его работать, но флажок не снимается при нажатии. Нужно ли что-то еще добавить? - person Jo Ko; 09.09.2016
comment
Просто проверяю, видели ли вы мой предыдущий комментарий. Пожалуйста, дай мне знать - person Jo Ko; 09.09.2016
comment
Привет, @JoKo, я добавил одно изменение, чтобы обеспечить функциональность флажка, и добавил ссылку на работающий живой пример. - person lawls544; 10.09.2016
comment
Думал, что ответил и ждал твоего, поэтому я заглянул сегодня и, похоже, комментарий исчез ... Я обновил исходный пост с кодом, пожалуйста, взгляните. Флажок по-прежнему не работает, в чем может быть проблема? - person Jo Ko; 13.09.2016
comment
@JoKo, 1. Судя по вашему последнему редактированию, ваши данные имеют два уровня вложенности (существует несколько транспортных средств, и каждое транспортное средство имеет несколько файлов). Пожалуйста, дайте мне знать, если мое понимание неверно. В этом случае вам необходимо свести данные в родительском компоненте так, чтобы каждый FileTableRow относился к одному файлу. 2. Кроме того, FileTableRow должен иметь тег-оболочку TableRow, а не div. Пожалуйста, посмотрите на рабочую демо-ссылку в моем ответе, чтобы увидеть, поможет ли это объяснить этот второй момент о моем втором замечании. - person lawls544; 14.09.2016
comment
@JoKo, я сделал новый пример, который, как мне кажется, более точно соответствует форме данных, с которой вы работаете (из того, что я собрал воедино в ваших примерах кода). webpackbin.com/VkuA-FbhZ - person lawls544; 14.09.2016
comment
Ваше предположение верно! Большое спасибо за доработку и уточнение. Несколько вопросов, почему const FileTableRow вместо класса FileTableRow? А также почему .forEach вместо .map? - person Jo Ko; 14.09.2016
comment
В примере FileTableRow реализован как функциональный компонент React (вместо класса ES6), поскольку он является чисто презентационным. Это не имеет большого значения (если вас интересуют рекомендации о том, когда что использовать, вы можете искать реагирующие глупые и умные компоненты). И что касается вашего второго вопроса, опять же, не так уж важно, как вы преобразуете свои данные. Я решил использовать .forEach, потому что для меня это было самым быстрым способом реализовать преобразование ваших вложенных данных. Конечно, можно было бы сопоставить транспортные средства, затем сопоставить файлы, а затем сгладить результат (на ваше усмотрение!) - person lawls544; 14.09.2016
comment
Очень ценю разъяснение! Только что попробовал ваш и, как ни странно, получил ошибку. Обновил исходный пост скриншотом. Взгляни, пожалуйста. - person Jo Ko; 15.09.2016
comment
на самом деле красиво получилось! это была какая-то другая ошибка. И последний вопрос: как я могу установить несколько флажков и просто записать в консоль информацию о выбранной строке? Например, если выбрана первая строка и нажата кнопка журнала консоли, я хочу, чтобы консоль записывала информацию для этой конкретной строки. Еще раз спасибо - person Jo Ko; 16.09.2016
comment
@JoKo 1. Чтобы включить множественный выбор, вы можете добавить реквизит multiSelectable={true} к вашему <Table>. 2. Вы можете использовать реквизит onRowSelection для <Table>, чтобы подключиться к функциям, определяющим, какие строки выбраны. Если на исходный вопрос был дан ответ, отметьте ответ как выбранный. - person lawls544; 16.09.2016
comment
Я попробовал, но консоль неправильно зарегистрировалась. Не могли бы вы показать, пожалуйста, в последний раз? Потому что именно этого я в конечном счете и пытался достичь. Приму ответ сразу. - person Jo Ko; 16.09.2016
comment
@JoKo Я отредактировал свой ответ с обновленным примером. - person lawls544; 16.09.2016
comment
Большое спасибо! То же самое и со мной, когда я попробовал, это просто запись номера строки, верно? Извините, если возникло недопонимание, но мне было интересно, как зарегистрировать информацию в этой конкретной выбранной строке, например, время начала, время окончания, тип, VIN. - person Jo Ko; 20.09.2016
comment
@JoKo Хук onRowSelection просто возвращает выбранные индексы строк. Сопоставление этого обратно с вашими исходными данными, чтобы получить более конкретные свойства, — это то, о чем вам нужно позаботиться. - person lawls544; 20.09.2016
comment
какие-либо предложения относительно того, на что обратить внимание? Потому что это то, что я пытался решить в конечном итоге. - person Jo Ko; 20.09.2016
comment
@JoKo Из третьего примера он будет отображаться обратно в результат строк 48–59 в main.js; какие бы данные ни использовались в таблице. - person lawls544; 20.09.2016
comment
Понял, очень ценю lawls544! Принял ответ и проголосовал. Я сделал попытку и зарегистрировался, но мне пришлось бы дважды нажимать, чтобы войти. Это проблема с вебпакбином? webpackbin.com/4kOXRc53- И правильно ли я это делаю? - person Jo Ko; 21.09.2016

Давайте рассмотрим эти предупреждения одно за другим:

Для первого предупреждения вам просто нужно обновиться до версии 0.15.4.

Для второго и третьего предупреждений, как указано, вы помещаете <div> внутри тегов <tr></tr> и наоборот. Возможно, вы создали компонент с именем FileTableRow, который поместили в теги <tr></tr>. Этот FileTableRow может иметь некоторую функцию render(), подобную этой:

render() {
    return (
        <div>
            ... some code here ...
        </div>
    )
}
person Jan Franz Palngipang    schedule 02.09.2016
comment
Да, у меня есть компонент FileTableRow, который в настоящее время возвращает .map, но с div в качестве контейнера, потому что я вынул div, и он выдает ошибку. Есть ли другой способ обойти это? - person Jo Ko; 09.09.2016
comment
Пожалуйста, взгляните на исходный пост с обновлением. Спасибо - person Jo Ko; 13.09.2016
comment
Я думаю, что TableBody передает свойства своим дочерним элементам. Итак, чтобы все работало идеально, попробуйте передать реквизиты FileTableRow. - person Jan Franz Palngipang; 15.09.2016