Блог

#react-native #redux #reference

#react-native #redux #ссылка

Вопрос:

 const myRef = createRef<any>();

const KeyboardAvoidingWrapper: React.FC<IKeyboardAvoidingProps> = (
  props: IKeyboardAvoidingProps,
 => {
  if (isAndroid) {
    return (
      <ScrollView ref={myRef} style={styles.scroll} contentContainerStyle={styles.scrollContent}>
        <KeyboardAvoiding>{props.children}</KeyboardAvoiding>
      </ScrollView>
    );
  }  

Комментарии:

1. почему вы хотите поместить a ref в состояние?

2. вопрос в том, что мне нужно создать ссылку в этом функциональном компоненте, передать ее в качестве аргумента компоненту и получить эту ссылку в целом в другом компоненте. Как это можно сделать?

3. Если я правильно понимаю, вы хотите передать всю эту «родительскую ссылку» в свой «props.children». В зависимости от того, используете ли вы React 16, существует контекст React, который вы можете использовать <Provider> для переноса за пределы ScrollView для использования через <Consumer> в ваших дочерних элементах. Но если вы хотите использовать Redux … у меня нет хороших комментариев, хотя я понимаю, что другой магазин работает над этим.

4. Чтобы добавить еще один более чистый подход, если оба компонента не разделяют… Я предлагаю вам создать контейнер, который обертывает оба компонента (ваш общий и этот компонент), вы можете передать вам ссылку на этот контейнер <ContinerX><General/><KeyboardAvoidWrapper/></ContainerX> . Извините, если слишком много слов, но пытаюсь открыть более общие решения для вашей проблемы.

Ответ №1:

 <Component ref={(ref) => {
  // You can now write ref to state,
  // which I will not recommend
  // or pass it to callback
  props.getInnerRef(ref);
}} />

// You need to pass getInnerRef
<Component getInnerRef={(ref) => {
  this.innerRef = ref;
}}
  

Комментарии:

1. вопрос в том, что мне нужно создать ссылку в этом функциональном компоненте, передать ее в качестве аргумента компоненту и получить эту ссылку в целом в другом компоненте. Как это можно сделать?

Ответ №2:

 const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;