реагируют виртуализированные данные таблицы Пример

Я пытаюсь реализовать простую таблицу данных, как показано на примере автора здесь: example реагируют виртуализированные данные таблицы Пример

... 
export default class TableExample extends Component { 
static contextTypes = { 
list: PropTypes.instanceOf(Immutable.List).isRequired 
}; 
...

Я попытался пройти в списке ImmutableJS как свойство не дали никаких результатов , Есть ли что-то еще, что мне здесь не хватает?

Как получить массив данных в компонент?

Мой родительский компонент, который делает пример таблицы выглядит следующим образом:

render() { 
    const list = fromJS(this.props.data); 
    console.log(typeof(list)); //this outputs "object" 
    console.log(list); // this outputs ImmutableJS list with size of 761 
    return (
    <TableExample list={list}/> 
    ) 
    }

Я также попытался изменить все заявления {список} в TableExample, связанных с this.context к this.props без особого успех. Любая помощь будет принята с благодарностью.

консоль ошибка, возвращаемая Chrome на данный момент:

Warning: React.createElement: type is invalid -- expected a string (for     
built-in components) or a class/function (for composite components) but  
got: undefined. You likely forgot to export your component from the    
file it's defined in. Check the render method of `TableExample`.

источник

2017-01-25 smada

Предоставьте реплика Plnkr, и я посмотрю. Похоже, что вы, например, импортируете «Таблицу» из виртуализованного виртуализатора неправильно или что-то в этом роде. В зависимости от того, как именно вы скопировали мой пример, это может быть связано с тем, что вам нужно изменить 'import Table from './Table'' для' import {Table} из' response-virtualized'' – brianvaughn

@brianvaughn Я не был уверен, как включите Plnkr с реакцией - я связал pastebin с моей таблицей, которая идентична таблице, которую вы предоставляете в своем примере: http://pastebin.com/LG8bXM76 – smada

Эти линии являются проблематичными:

import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from 'react-virtualized'; 
import { LabeledInput, InputRow } from 'react-virtualized';

Эти компоненты используются в среагировать-виртуализированных демо-сайт. Они не упакованы с ответным виртуализированным NPM dist (поэтому вы не можете импортировать их). Это является причиной сообщения об ошибке вставили выше:

Предупреждение: React.createElement: тип неверен - ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов) но получил: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен. Проверьте метод рендеринга TableExample.

Возможны дополнительные проблемы; Я не слишком внимательно читал, заметив плохой импорт.

источник

2017-01-25 23:47:40 brianvaughn

большое спасибо за вашу помощь здесь - это только стало понятным в течение почти двух дней после использования вашего lib - надеюсь, этот вопрос помогает людям определить линию между компонентами lib и обычай для демонстрационных целей – smada

Похоже, что автор включил в таблицу стилей, которые могут или не могут быть правильно рендеринг в вашем приложении. Впоследствии все содержимое из строк 74-162 в исходном примере примера автора не будет выдаваться, что, в свою очередь, каскадируется через функцию рендеринга, разбивающую компонент.

Вы можете устранить эту проблему и проверить ее, удалив строки 74-162 и заключительный тег закрытия в строке 217. После перезагрузки вам следует приветствовать базовую таблицу.

Ваш подход к предоставлению массива данных является правильным и приводит к соответствующему рендерингу.

Приветствия @brianvaughn и его фантастическая работа

источник

2017-01-25 23:34:11 smada

реагируют виртуализированные данные таблицы Пример

ответ

Смежные вопросы