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

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]);