Как безопасно вводить реквизит в детей React? - PullRequest
Новая
       36

Как безопасно вводить реквизит в детей React?

0 голосов
/ 10 июня 2018

Я создаю компонент React, который задерживает размонтирование его дочерних элементов для их анимации.При размонтировании я хотел бы передать дополнительную подпорку (например, атрибут данных или имя класса) для обработки анимации.

Это конкретный случай общей ситуации, когда я хочу переопределитьопределенные свойства детей.Я пришел к выводу, что следующий шаблон делает именно то, что я хочу: 

this.props.children.map(child => 
    <child.type key={child.key} 
                ref={child.ref}
               {...child.props} 
               // add my props into children here
               data-leaving={true} />)

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

Тем не менее, это недокументировано и кажется очень хакерским.Я хотел бы знать, безопасно ли это использовать в каждом случае.

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

1 Ответ

0 голосов
/ 10 июня 2018

Лучший способ добавить новые реквизиты или переопределить существующие - это сопоставить реквизиты своих детей и клонировать каждый элемент, используя React.cloneElement.

Хорошая статья, чтобы прочитать о реагирующих детях . 

React.Children.map(this.props.children, child =>
    React.cloneElement(child, { newProp: 'value', existingProp: 'value' }));

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

Пример: 

// Root Component
const Parent = () => { 
  const onClose = () => console.log('I am on Close Prop');

  // Pass OnClose to children
  return <MyComponent>{ children(onClose) }</MyComponent>
}

// MyComponent
const MyComponent = () => {
// Pass OnClose to children
  return (
    <div>
      {/* children below */}
      {(onClose) => (
          <FormComponent
              myNewProp={onClose}
          />
      )}
    </div>
);

}
...