Reactjs 为什么我的自定义组件没有在React Native中呈现？

我已经创建了一个名为OrderGuideSelect的组件，我正在尝试在应用程序的另一个区域中呈现它。问题是OrderGuideSelect组件未呈现。当我设置断点时，我可以点击RenderRoderGuideOptions函数的内部，但它从未进入OrderGuideSelect.js文件。我还尝试将“导出默认值”放在类声明的前面，而不是连接的前面，但这并没有什么区别。有人知道如何正确获取OrderGuide选择组件渲染吗

下面是我调用呈现OrderGuideSelect组件的函数的地方：

<TouchableOpacity onPress={() => this.renderOrderGuideOptions()}>
    <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>

this.renderroderguideoptions（）}>

下面是渲染函数：

renderOrderGuideOptions = () => {
    return (
        <View>
            <OrderGuideSelect />
        </View>
    )
}

renderroderguideoptions=（）=>{
返回(
)
}

以下是OrderGuideSelect.js文件：

import React, {Component} from 'react';
import {View, FlatList, ActivityIndicator, StyleSheet} from 'react-native';
import {connect} from 'react-redux';
import {fetchOrderGuides} from '../../actions/AppActions';
import {orderGuideSelected} from '../../actions/ProductAction';
import Header from '../../components/Header/Header';
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import selection from '../../selection';
import OrderGuideOption from './OrderGuideOption';

const MBIcon = createIconSetFromIcoMoon(selection);

class OrderGuideSelect extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.dispatch(fetchOrderGuides());
    }

    selectOrderGuide = id => {
        this.props.dispatch(orderGuideSelected(id));
    }

    render() {
        const {isLoading, orderGuides} = this.props.orderGuide;
        return (
            <View style={styles.wrapper}>
                <Header />
                <View style={styles.iconLine}>
                    <MBIcon name='ico-24-filter' style={styles.filterIcon} />                    
                </View>

                {isLoading &&
                    <ActivityIndicator
                        style={{alignSelf: 'center'}}
                        animating={true}
                        size='large'
                    />
                }

                {!isLoading &&
                    <View style={styles.optionList}>
                        <FlatList
                            style={styles.optionList}
                            data={orderGuides}
                            keyExtractor={(item, index) => item.id.toString()}
                            renderItem={({item}) => <OrderGuideOption guideData={item} isSelected={item.id == this.props.selectedGuide.id} onSelected={this.selectOrderGuide} />}
                        />
                    </View>
                }                
            </View>
        );
    }
}

function mapStateToProps(state){
    const {products, orderGuide} = state;
    return {
        selectedGuide: products.selectedOrderGuide,
        orderGuide
    }
}

export default connect(mapStateToProps)(OrderGuideSelect);

import React，{Component}来自'React'；
从“react native”导入{View，FlatList，ActivityIndicator，StyleSheet}；
从'react redux'导入{connect}；
从“../../actions/AppActions”导入{fetchOrderGuides}；
从“../../actions/ProductAction”导入{orderGuideSelected}；
从“../../components/Header/Header”导入标题；
从“react native vector icons”导入{CreateIconsetFromicoon}；
从“../../selection”导入所选内容；
从“/OrderGuideOption”导入OrderGuideOption；
const MBIcon=createIConsetFromicoon（选择）；
类OrderGuideSelect扩展组件{
建造师（道具）{
超级（道具）；
}
组件willmount（）{
this.props.dispatch（fetchOrderGuides（））；
}
选择OrderGuide=id=>{
此.props.dispatch（orderGuideSelected（id））；
}
render（）{
const{isLoading，orderGuides}=this.props.orderGuide；
返回(
{孤岛加载&&
我想你想要类似的东西

类RenderRoderGuideSelectComponent扩展组件{
建造师（道具）{
超级（道具）；
这个州={
ShowOrderGuide选择：false
};
}

RenderRoderGuideOptions=（）=>{
this.setState（{showOrderGuideSelect:true}）；
}

render（）{
if（this.state.showOrderGuideSelect）{
返回(
);
}否则{
返回(
this.renderroderguideoptions（）}>
);
}
}
}

我想你想要类似的东西

类RenderRoderGuideSelectComponent扩展组件{
建造师（道具）{
超级（道具）；
这个州={
ShowOrderGuide选择：false
};
}

RenderRoderGuideOptions=（）=>{
this.setState（{showOrderGuideSelect:true}）；
}

render（）{
if（this.state.showOrderGuideSelect）{
返回(
);
}否则{
返回(
this.renderroderguideoptions（）}>
);
}
}
}

您可以在组件中保留状态属性并根据此状态属性显示OrderGuideOptions来执行您想要的操作

state = { showOrderGuideOptions: false };

renderOrderGuideOptions = () =>
    this.setState( prevState => ( { showOrderGuideOptions: !prevState.showOrderGuideOptions }) );

render() {
    return (
        <View>
        <TouchableOpacity onPress={this.renderOrderGuideOptions}>
            <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
        </TouchableOpacity>
        { this.state.showOrderGuideOptions && <OrderGuideSelect /> }
        </View>
    )
}

state={showOrderGuideOptions:false}；
RenderRoderGuideOptions=（）=>
this.setState（prevState=>（{showOrderGuideOptions:！prevState.showOrderGuideOptions}））；
render（）{
返回(
{this.state.showOrderGuideOptions&}
)
}
您可以做您想做的事情—可能在组件中保留状态属性，并根据此状态属性显示OrderGuide选项

state = { showOrderGuideOptions: false };

renderOrderGuideOptions = () =>
    this.setState( prevState => ( { showOrderGuideOptions: !prevState.showOrderGuideOptions }) );

render() {
    return (
        <View>
        <TouchableOpacity onPress={this.renderOrderGuideOptions}>
            <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
        </TouchableOpacity>
        { this.state.showOrderGuideOptions && <OrderGuideSelect /> }
        </View>
    )
}

state={showOrderGuideOptions:false}；
RenderRoderGuideOptions=（）=>
this.setState（prevState=>（{showOrderGuideOptions:！prevState.showOrderGuideOptions}））；
render（）{
返回(
{this.state.showOrderGuideOptions&}
)
}
在您的代码中调用
this.renderguideoptions
函数on
on press
事件没有意义，即
this.renderguideoptions
返回元素，但在DOM中将其附加到何处

这应该使用
React
中的
state
来实现。因此，您可以在
onPress
处理程序中设置状态，然后在渲染中使用该状态来显示您的
OrderGuideOptions
组件

因此，在
onPress
事件绑定函数处理程序时：

<TouchableOpacity onPress={this.showOrderGuideOptions}>
    <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>

在最后一步中，使用此
showOrderGuideFunction
状态在
render
函数中呈现组件，如下所示：

render() {
    return (
        <div>
            ...
            {
                this.state.showOrderGuideFunction &&
                renderOrderGuideOptions()
            }
        </div>
    )
}

render（）{
返回(
...
{
this.state.showOrderGuide函数&&
RenderRoderGuideOptions（）
}
)
}
在您的代码中调用
this.renderguideoptions
函数on
on press
事件没有意义，即
this.renderguideoptions
返回元素，但在DOM中将其附加到何处

这应该使用
React
中的
state
来实现。因此，您可以在
onPress
处理程序中设置状态，然后在渲染中使用该状态来显示您的
OrderGuideOptions
组件

因此，在
onPress
事件绑定函数处理程序时：

<TouchableOpacity onPress={this.showOrderGuideOptions}>
    <MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>

在最后一步中，使用此
showOrderGuideFunction
状态在
render
函数中呈现组件，如下所示：

render() {
    return (
        <div>
            ...
            {
                this.state.showOrderGuideFunction &&
                renderOrderGuideOptions()
            }
        </div>
    )
}

render（）{
返回(
...
{
this.state.showOrderGuide函数&&
RenderRoderGuideOptions（）
}
)
}
我不知道React Native，但在onPress中，您的组件应该呈现在哪里？它只是onPress，我认为它与onClick没有什么不同是吗？您使用handl调用onPress