Reaction-Native: Доступ к функции дочернего компонента внутри родительского компонента.

Question

Цель: создать повторно используемый компонент OptionFan, который позволяет дочерним элементам быть компонентами ChildButton.Проблема: невозможно получить доступ к методу ChildButton "flyOut ()" внутри метода компонента OptionFan (parent) "showOptions ()"

в компоненте Option Fan:

 showOptions = () => {
        let animations = this.props.children.map((child, i) => {
            this.refs.child.flyOut();
        });
        Animated.stagger(this.props.staggerDelay, animations).start();
    }
    renderOptions = () => {
       return this.props.children.map((child, i) => {
           return <ChildButton ref={child} siblings={this.props.children.length} key={i} icon={} number={i} size={} />

       })
    }

в компоненте ChildButton:

componentDidMount() {
        this.props.ref(this);
    }

flyOut = () => {
        const {number, size} = this.state;
        let offset = this.findChildCoordinates(number);
        Animated.timing(
            this.state.move,
            {toValue: offset}
        ).start();
    }

нужный метод недоступен в предложениях кода, что не так в моем подходе?

Answer 1

Вам нужно привязать их к вашему классу.Измените свой optionFan компонент следующим образом:

Option Fan:

showOptions = () => {
    let animations = this.props.children.map((child, i) => {
        this.child.flyOut();
    });
    Animated.stagger(this.props.staggerDelay, animations).start();
}
renderOptions = () => {
   return this.props.children.map(i => {
       return <ChildButton ref={ Ref =>(this.child = Ref)} siblings={this.props.children.length} key={i} icon={} number={i} size={} />

   })
}

Для получения дополнительной информации см. https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542