javascript - 组件在功能组件内部无法正常工作

我在使用react-native-swipeable组件时遇到问题，通常它可以正常工作，但是如果我尝试从无状态功能组件中使用它，它将停止正常工作。我想知道这是否与我的代码有关？

这两种情况都是从父组件调用的，如下所示：

render() {
    const {currentlyOpenSwipeable} = this.state;
    const itemProps = {
        onOpen: (event, gestureState, swipeable) => {
            if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
                currentlyOpenSwipeable.recenter();
            }

            this.setState({currentlyOpenSwipeable: swipeable});
        },
        onClose: () => this.setState({currentlyOpenSwipeable: null})
    };
        return (
            <View style={{flex: 1}}>
                <FlatList
                    data={this.state.data}
                    renderItem={({item}) => (
                       <ListItem
                           {...itemProps}
                           item = {item}/>
                    )}
                    extraData={this.state}
                    keyExtractor={item => item.docId}/>
            </View>
       )
  }

基本上，如果我直接在render函数中使用此组件，则效果很好：

class ListItem extends React.PureComponent {
    constructor(props){
        super(props)

        this.swipeable = null
    }
    render(){
        return(
            <View>
                <Swipeable onRef={ref => this.swipeable = ref}
                    rightButtons={[
                        <TouchableOpacity style={{backgroundColor: 'red'}}>
                            <Icon name="delete" size={24} color={'white'}/>
                        </TouchableOpacity>
                    ]}
                    onRightButtonsOpenRelease={this.props.onOpen}
                    onRightButtonsCloseRelease={this.props.onClose}>
                        <View>
                            <Text> Test </Text>
                        </View>
                </Swipeable>
            </View>
        )
    }
}

如果我尝试从功能组件内部进行渲染，它仍然会滑动但会立即关闭，因此无法使用。

class ListItem extends React.PureComponent {
    constructor(props){
        super(props)

        this.swipeable = null
    }
    render(){
        const RenderSwipeRow = () => {
             return(
                <View>
                    <Swipeable onRef={ref => this.swipeable = ref}
                        rightButtons={[
                            <TouchableOpacity style={{backgroundColor: 'red'}}>
                                <Icon name="delete" size={24} color={'white'}/>
                            </TouchableOpacity>
                        ]}
                        onRightButtonsOpenRelease={this.props.onOpen}
                        onRightButtonsCloseRelease={this.props.onClose}>
                            <View>
                                <Text> Test </Text>
                            </View>
                    </Swipeable>
                </View>
            )
        }

        return(
            <View style={{flex: 1}}>
                <RenderSwipeRow/>
            </View>
        )
    }
}

我不明白这里有什么区别。我当时在想，我没有将所有必需的道具传递给组件，但事实并非如此。

如果在父级别渲染中记录this.state.currentlyOpenSwipeable，则表明在滑动正常工作时，存在一个lastOffset值和rightButtonsOpen = true



当滑动不起作用时（从功能组件渲染时），这些字段看起来未设置或不正确：



因此，可能没有设置this.state.currentlyOpenSwipeable的更新值吗？

谢谢你的帮助！

最佳答案

您的问题是，您说它是一个无状态的功能组件，但试图在渲染中设置然后使用组件状态，这是一个坏主意。如果要使其保持无状态，则应该找到一种方法来传递数据作为道具或在渲染器外部管理状态。

渲染功能应始终保持纯净，为此您应收到控制台警告。

关于javascript - 组件在功能组件内部无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49921181/