react-native-render-html - 如何使自定义渲染器具有交互性？（监听组件状态更新，并重新渲染）

Question

我在自定义渲染器中添加了复选框，但它不听状态更新。您对如何使状态在自定义渲染器中工作有任何想法吗？

我有红色，在v5.0.1中你可以用作渲染器——反应组件。但我在文档中找不到详细信息。

const quizRenderer = (htmlAttribs, children) => {
        const { type, quizid: quizId } = htmlAttribs
        return <View key={`quiz-${quizId}`}>{children}</View>
    }

    const variantRenderer = (
        htmlAttribs,
        children,
        convertedCSSStyles,
        passProps
    ) => {
        const { quizid: quizId, variantid: variantId, type } = htmlAttribs
        console.log('userAnswers', userAnswers)

        const handlePressQuizVariant = (quizId, variantId) => () => {
            let quizAnswers = userAnswers[quizId] || []
            //if this answer also been set, we remove it
            // if there was clear cell -- we add it
            if (quizAnswers.includes(variantId)) {
                quizAnswers = quizAnswers.filter(elem => elem !== variantId)
            } else {
                quizAnswers.push(variantId)
            }

            setUserAnswers(userAnswers => {
                const newUserAnswers = [...userAnswers]
                newUserAnswers[quizId] = quizAnswers
                return newUserAnswers
            })
        }

        return (
            <TouchableOpacity
                key={`variant-${quizId}-${variantId}`}
                onPress={handlePressQuizVariant(quizId, variantId)}
            >
                <Text>
                    <CheckBox
                        size={18}
                        checked={userAnswers[quizId].includes(variantId)}
                        {...(type === 'single'
                            ? { checkedIcon: 'dot-circle-o', uncheckedIcon: 'circle-o' }
                            : {})}
                        containerStyle={{ margin: 0, padding: 0 }}
                    />{' '}
                    {children}
                </Text>
            </TouchableOpacity>
        )
    }