Предотвратите реактивный компонент от рендеринга дважды при использовании приставки с componentWillMount

Question

Предотвратите реактивный компонент от рендеринга дважды при использовании приставки с componentWillMount

Как уже упоминалось в комментариях, это относится к несоответствующему атрибуту атрибутов. Это новая функция в CSS Selectors Level 4.

В настоящее время она доступна в Chrome 49+, Firefox 47+, Safari 9+ и Opera 37 + *. До этого он был доступен только в стилях User-Agent Chrome, начиная с Chrome 39, но может быть включен для веб-контента, установив флаг экспериментальных функций.

* Более ранние версии Opera также могут его поддерживать.

Рабочий пример / Тест-браузер:

[data-test] {
    width: 100px;
    height: 100px;
    margin: 4px;
}

[data-test="A"] {
    background: red;
}

[data-test="a" i] {
    background: green;
}

Green if supported, red if not:

Вышеуказанный квадрат будет зеленым, если браузер поддерживает эта функция, красный, если нет.

30

reactjs redux

задан Luke Sapan 18 December 2015 в 02:09

2 ответа

Другие вопросы по тегам:

reactjs redux

Похожие вопросы:

score 8 · Answer 1

Одна вещь, которую вы могли бы сделать, это создать компонент более высокого порядка, который обрабатывает базовый шаблон загрузки другого компонента (или без компонента) перед загрузкой требуемого реквизита.

export const LoaderWrapper = function(hasLoaded, Component, LoaderComponent, onLoad) {
    return props => {
        if (hasLoaded(props)) {
            return <Component {...props} />
        }
        else {
            if (onLoad) onLoad(props)

            return { LoaderComponent ? <LoaderComponent /> : null }
        }
    }
}

Затем вы можете обернуть свой компонент перед подключением, чтобы получить желаемое поведение.

export default connect(state => ({item: state.item}))(LoaderWrapper(
    ((props) => !!props.item),
    Editor,
    null,
    (props) => props.dispatch(editItem(props.params.id))
))

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

score 0 · Answer 2

Что делает editItem? Добавляет ли он элемент в состояние избыточности или уже существует?

Если он добавляет, я представляю, что происходит, что цикл рендеринга происходит с текущим реквизитом, то есть элемент пустой. Затем он снова визуализируется после смены реквизита, устанавливая элемент.

Один из подходов к исправлению такого рода вещей заключается в создании компонента более высокого порядка, который оборачивает Редактор и вызывает диспетчерское действие, при котором рендеринг устанавливается либо на экран загрузки, либо на пустой div, пока элемент не будет установлен. Таким образом, вы можете быть уверены, что у редактора будет предмет.

Но, не зная, что делает editItem, это трудно понять. Может быть, вы могли бы вставить код для этого?