Question

考虑这样的数组：

const myArray = [1,2,3]

根据此数组的长度（仅在2到3之间不断变化），我想添加或删除显示此值的react-native-svg组件。

到目前为止，这是我的处理方法（我知道这段代码将无法工作）：

const myComponent = (props) => {
    const [myArray, setMyArray] = useState([1,2,3]);

    const mySVGComponents = useEffect(() => {
        //It is ensured that the array has at least two values
        let GroupWrapper = (() => {
            return (
                <G>
                    <SVGText>{myArray[0]}</SVGText>
                    <SVGText>{myArray[1]}</SVGText>
                </G>
            )
        })

        if (myArray.length === 3) {
            GroupWrapper = (() => {
                return (
                    <GroupWrapper>
                        <SVGText>{myArray[2]}</SVGText>
                    </GroupWrapper>
                )
            })
        }

        return GroupWrapper;

    }, [myArray]);

    return (
        <G>
            {mySVGComponents}
        </G>
    )
}

如何根据SVGText的长度有条件地将<G>个组件注入myArray组件中？

Answer 1

在React中渲染项目的数组并不像您在这里尝试的那样复杂。您可以在此处阅读有关此内容的模式：https://reactjs.org/docs/lists-and-keys.html

具体针对您的情况，您首先必须删除useEffect，而不应该那样使用它（https://reactjs.org/docs/hooks-effect.html）。您要做的就是将数组映射到return语句中，看看这个：

export const MyComponent = (props) => {
    const [myArray, setMyArray] = useState([1,2,3]);
    return <G>{myArray.map(item => <SVGText key={item}>{item}</SVGText>)}</G>;
}

通过这种方式呈现数组中的每个项目，当您使用setMyArray更新数组时，它将自动重新呈现。

Answer 2

仅将“ mySVGComponents”更改为以下给定的代码。

const mySVGComponents = useEffect(() => {
            //It is ensured that the array has at least two values

             let GroupWrapper = (() => {

               return (
                    <G>
                      {
                       myArray.map(item => <SVGText>{item}</SVGText>)
                      }  
                    </G>
                )
            })
            return GroupWrapper;

        }, [myArray]);

如何在React中有条件地将子组件添加到父组件？

2 个答案: