Как Styled Components пересылать реквизит? - PullRequest
Новая
       82

Как Styled Components пересылать реквизит?

2 голосов
/ 23 февраля 2020

Я уже некоторое время работаю со Styled Components, но, честно говоря, я так и не понял, как это работает. Вот о чем мой вопрос.

Итак, я понимаю, что стилизованные компоненты могут адаптироваться на основе реквизита. Я не понимаю, как работает пересылка реквизита.

Например, в моем случае я работаю с React Native. Есть некоторые реквизиты по умолчанию, которые я дал своему полю ввода. Теперь стилизованная оболочка компонента автоматически выбирает подпорку высоты по умолчанию, но если я явно передам подпорку, она не подхватит ее, и мне придется вручную получить ее из подпорки. О чем это? 

import React from "react";
import styled from "styled-components/native";

const StyledTextInput = styled.TextInput`
   /* Why do I have to do this for custom heights.
    * Isn't height automatically get forwarded?
    */

  /* if I comment this height style out, It takes defaultProp height but doesn't take custom height
   * I have to uncomment it for the custom height
   */

  height: ${({ height }) => height};

   ...other styles
`;

const TextInput = ({ height }) => {
  return <StyledTextInput height={height} />;
};

TextInput.defaultProps = {
  height: 50
};

export default TextInput;


// Then In some Smart Component
class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <TextInput height={200} /> // ???
        ...other stuff
      </View>
    );
  }
}

Вот мои вопросы:

  • В каких случаях стилизованный компонент автоматически поднимает опору?
  • Какие реквизиты автоматически переадресовываются.
  • Как работает пересылка реквизита?

Документация мало говорит об этом или, может быть, я пропустил это.

Любая помощь будет очень цениться.

1 Ответ

1 голос
/ 23 февраля 2020

Все стандартные атрибуты автоматически пересылаются реквизитом. Стандартные атрибуты, такие как defaultValue и type. Обратите внимание на нотацию верблюда для атрибутов в React.

Если это пользовательский атрибут, такой как someCustomAttribute prop, он не передается напрямую в DOM.

Если есть реквизиты, которые верно для всех экземпляров стилизованного компонента, вы можете использовать .attrs. 

const StyledTextInput = styled.TextInput.attrs(props => ({
  height: props.height
}))`
  // other styles
`
...