javascript - React Native - 从作为 prop 传递的函数调用方法

Question

我正在使用一个名为 react-native-linkedin 的库，该库提供了一个选项来覆盖名为 renderButton() 的方法，以创建触发登录过程的按钮。

现在我需要调用 LinkedInModal 类中的 open 方法，该类与接收 renderButton 作为 prop 的类相同。

如何从我的 renderButton 方法中调用这个“open”方法？，我已经尝试过:

LinkedInModal.open()

方法如下:

renderButton = () => {
        return (React.createElement(TouchableOpacity, 
                  { accessibilityComponentType: 'button', accessibilityTraits: ['button'], 
                    onPress: LinkedInModal.open() 
                  },
                React.createElement(Text, {style: {color: "#FFF"}}, "Continue with Linkedin")));
    }

它被传递给组件:

<LinkedInModal
                        clientID="..."
                        clientSecret="..."
                        redirectUri="https://www.linkedin.com/developer/apps"
                        onSuccess={token => this.linkedinLogin(token.access_token)}
                        linkText="Continue with Linkedin"
                        renderButton={this.renderButton}
                    />

但是它不起作用。

我得到的错误是:

    TypeError: _reactNativeLinkedin.default.open is not a function. 
(In '_reactNativeLinkedin.default.open()', '_reactNativeLinkedin.default.open' is undefined)

Answer 1

解决方案是创建一个引用:

linkedRef = React.createRef();

然后在调用组件时，将其作为 prop 传递:

            <LinkedInModal
                ref={this.linkedRef}
                clientID="..."
                clientSecret="..."
                redirectUri="https://www.linkedin.com/developer/apps"
                onSuccess={token => this.linkedinLogin(token.access_token)}
                linkText="Continue with Linkedin"
                renderButton={this.renderButton}
            />

并在我的自定义方法中使用它:

onPress={() => this.linkedRef.current.open()}>