Как условно добавить дочерний компонент в родительский компонент в React? - PullRequest
Новая
       5

Как условно добавить дочерний компонент в родительский компонент в React?

1 голос
/ 19 февраля 2020

Рассмотрим массив, подобный следующему: 

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?

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

Рендеринг массива предметов в 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.

0 голосов
/ 19 февраля 2020

Измените только ваши "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]);
...