Question

一直在浏览https://facebook.github.io/react-native/docs/text.html中的文档。不清楚如何链接两个类之间的引用。我试图使用标签而不是它，它没有给出参考发现错误。

代码：

import React, {Component} from 'react';
import {
    Text,
    View,
    AppRegistry,
} from 'react-native';

class MyAppHeaderText extends Component {

    render() {
        return(
            <MyAppHeader>
                <Text style={{fontSize:20}}>
                    {this.props.children}
                </Text>
            </MyAppHeader>
        )
    }
}

class Test2 extends Component {

    constructor(props){
        super(props);

        this.state = {
            mainText: 'This is Bird',
            subText : 'Not dino'
        }
    }

    render() {
        return(
            <View>
                {/* <Text>

                    {this.state.mainText}
                    {this.state.subText}
                </Text> */}
                <MyAppHeaderText>
                    <MyAppHeader>
                        {this.state.mainText}
                        {this.state.subText}
                    </MyAppHeader>
                </MyAppHeaderText>
            </View>
        )
    }
}

export default MyAppHeaderText;

AppRegistry.registerComponent('AwesomeProject',() => Test2);

错误：

ReferenceError：无法找到变量：MyAppHeader

此错误位于：   在Test2中（在renderApplication.js：35）   在RCTView（在View.js：113）   在视图中（在AppContainer.js：102）   在RCTView（在View.js：113）   在视图中（在AppContainer.js：122）   在AppContainer中（在renderApplication.js：34）

Answer 1

正如Derek所说，

您从未定义MyAppHeader，因此您会收到错误。

您可以删除项目中的所有<MyAppHeader></MyAppHeader>，它应该可以使用！

否则，您需要定义MyAppHeader组件才能使其正常工作。

明确发布React Components Components and Props - React

希望它会有所帮助。

Answer 2

那样，您就可以做自己想要的事。

class Test2 extends Component {

    constructor(props){
        super(props);

        this.state = {
            mainText: 'This is Bird',
            subText : 'Not dino'
        }
    }

    render() {
        return(
            <View>
                {/* <Text>

                    {this.state.mainText}
                    {this.state.subText}
                </Text> */}
                <MyAppHeaderText>
                        {this.state.mainText}
                        {this.state.subText}
                </MyAppHeaderText>
            </View>
        )
    }
}

React Native ReferenceError无法找到变量

2 个答案: