如何在 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>
    )
}

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

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 中有条件地将子组件添加到父组件？

How to conditionally add a child component to a parent component in React?

reactjs

react-native

react-native-svg