Question

我创建了一个名为OrderGuideSelect的组件，并尝试在我们应用程序的另一个区域中进行渲染。问题是OrderGuideSelect组件未呈现。当我设置断点时，我可以在renderOrderGuideOptions函数内部进行操作，但是它永远不会进入OrderGuideSelect.js文件。我还尝试将'export default'放在类声明的前面，而不是连接的前面，但这没什么不同。有人知道如何正确显示OrderGuideSelect组件吗？

在这里我调用呈现OrderGuideSelect组件的函数：

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

这是渲染功能：

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

这是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);

此外，我可能正在导入的OrderGuideSelect组件应该是正确的：

Answer 1

在您对this.renderOrderGuideOptions事件调用onPress函数的代码中没有意义，即this.renderOrderGuideOptions返回该元素，但将其附加在DOM中的何处？

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

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

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

现在，此showOrderGuideOptions会将名为showOrderGuideFunction的状态设置为true。

showOrderGuideOptions(){
   this.setState({showOrderGuideFunction: true});
}

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

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

Answer 2

您可以执行可能想要在组件中保留状态属性的操作，并根据该状态属性显示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>
    )
}

Answer 3

我想你想要类似的东西

RenderOrderGuideSelectComponent类扩展了Component {    构造函数（道具）{      超级（道具）;      this.state = {        showOrderGuideSelect：假      };    }

renderOrderGuideOptions =（）=> {      this.setState（{showOrderGuideSelect：true}）;    }

render（）{      if（this.state.showOrderGuideSelect）{        返回（                                          ）;      }其他{        返回（           this.renderOrderGuideOptions（）}>                              ）;      }    }   }

为什么我的自定义组件无法在React Native中呈现？

3 个答案: