Question

我有我的组件类，我们称它为MyComponent。它具有复杂的执行逻辑，但是这是省略不必要代码段的样子：

class MyComponent extends Component {

    justWarn(input) {
        console.warn(input);
        // do something with `this` as well
    }

    render() {
        return (
            <View>
                {this.props.myText}
            </View>
        );
    }
}

const mapStateToProps = () => {
    // Call the getText function here
    return {
        myText: getText()
    };
}

export default connect(mapStateToProps)(MyComponent);

现在，函数getText在其他文件中定义，如下所示：

function getText() {
    // Let's assume it returns hard-coded value for the sake of brevity

    return (
        <Text>
            <Text>I am the first part</Text>
            <Text
            onPress={function(){
                // I want to call the function that is defined inside MyComponent
                // since this Text will eventually be a part of MyComponent
                this.justWarn('Warn me in the yellow box')
            }}
            >I am the clickable part
            </Text>
        </Text>
    );
}

当我尝试从上面定义的justWarn调用MyComponent内部定义的Text方法时，出现错误undefined is not a function, evaluating this.justWarn。

我的问题是，我没有使用箭头功能，因此this在声明onPress处理程序时未绑定。当Text是MyComponent的一部分时，它实际上是被调用的，因此this是否不对应于MyComponent并且上面的代码应该可以正常工作？

我在这里做错了什么？通过将getText和MyComponent分成两个文件，有什么方法可以实现？

谢谢。

Answer 1

问题是getText没有this上下文，因此您需要以某种方式绑定它以获得上下文。

一种实现此目的的方法是通过像这样更改MyComponent-

class MyComponent extends Component {

    justWarn(input) {
        console.warn(input);
        alert(input)
        // do something with `this` as well
    }

    render() {
        const myText = this.props.myText.bind(this)
        return (
            <View>
                <Text>something should render</Text>
                {myText()}
            </View>
        );
    }
}

const mapStateToProps = () => {
    // Call the getText function here
    return {
        myText: getText
    };
}

export default connect(mapStateToProps)(MyComponent);

...

然后在像这样的onPress事件处理程序中使用箭头功能-

function getText() {
    // Let's assume it returns hard-coded value for the sake of brevity

    return (
        <Text>
            <Text>I am the first part</Text>
            <Text
              onPress={() => {this.justWarn('Warn me in the yellow box')}}
            >I am the clickable part
            </Text>
        </Text>
    );
}

...

希望有帮助。

将onPress处理程序附加到在组件外部构造的Text

1 个答案: