Как оживить компонент React для рендера?

Я пытаюсь анимировать компонент React, содержащий данные, полученные из других источников. Размещение его в ReactCSSTransitionGroup отлично работало. То есть, пока я не изменил метод render() компонента, чтобы вернуть false до тех пор, пока данные не будут получены (до prevent it from being rendered without data).Как оживить компонент React для рендера?

Теперь, я думаю, компонент сразу монтируется, и в этот момент классы анимации добавляются, но только отображаются впоследствии. Правильно ли это? Как я могу получить компонент для анимации, когда render возвращает фактический компонент?

источник

2015-03-01 Vincent

Можете ли вы показать нам код, который вы написали? (Это не работает должным образом) – magnudae

Я работал над скрипкой, но мне потребовалось слишком много усилий, когда мне показалось, что у меня есть преимущество. Оказалось, что свинец не помог, поэтому я посмотрю, смогу ли я что-нибудь приготовить. – Vincent

ReactCSSTransitionGroup активируется при добавлении и удалении компонентов до props.children. Так как ваш компонент установлен, прежде чем извлекать данные, ничего не произойдет после того, как данные извлекаются (я думаю, что это верно, даже если render() метод компонента возвращает ложь. Дайте мне знать в комментариях, если что неверно)

Here's a solution

Просто не монтируйте компонент (в решении это знак <div key="1">), пока класс реагирования не получит данные. Используйте состояния компонентов на компоненте , чтобы отслеживать состояние вашего асинхронного запроса.

источник

2015-03-03 11:37:28

Спасибо за скрипку. Я вижу, как это делает анимацию правильно, но выборка данных важна для дочернего компонента, а не для родителя. Фактически, разные дети делают это по-разному. Он также чувствует, что дети сами должны решить, следует ли их отображать или нет - иначе поведение элемента зависит от компонента, в котором он находится. Таким образом, я предпочел бы, чтобы компонент был анимирован на рендере, а не на монтировании , а затем измените, когда компонент установлен. – Vincent

К сожалению, я не могу придумать, как это сделать, потому что жизненный цикл ReactCSSTransitionGroup запускается, когда компонент добавляется к его дочерним элементам. Если компонент уже существует, вы не сможете повторно запускать анимацию, не отключая и не перезагружая компонент. Не кажется мне неестественным для родителя, чтобы определить, должны ли его дети быть визуализированы, потому что родитель фактически решает, возвращать ли дети в свой метод 'render()'. Есть ли причина, по которой вы хотите, чтобы результат рендеринга() вызывал анимацию? –

Хмм, bummer. Ребенок несет ответственность за получение полученных данных и должен предоставить результат своему родителю, чтобы решить этот вопрос. Я пытался удержать Flux до тех пор, пока не справился с React, но, возможно, пришло время для меня начать реализацию - тогда, может быть, ваш ответ имеет больше смысла. Я дам ему знать, если это так :) – Vincent

ReactCSSTransitionGroup не играет хорошо с таблицами, так как по умолчанию поведение заключается в том, чтобы обернуть теги тегами <span>. Вы можете предоставить его своим компонентом, но я нашел решение довольно тяжелым и сложным.

У меня есть другой подход, который вы можете найти here, что позволяет компоненту React обновляться каждый раз при изменении контента. Анимация постоянно запускается путем переключения между двумя повторяющимися стилями CSS.

источник

2016-02-01 10:21:35

Как оживить компонент React для рендера?

ответ

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