如何在条件内声明包含 JSX 的 const 并在条件外访问它？ [复制]

Question

如果（且仅当）一些在 props 中传递时，我应该渲染图片的组件有问题。

我在条件中声明了一个const UserImagesJsx，但我无法在返回的表达式中访问它，它告诉我它是未定义的。

代码如下：

import React from 'react';
import styled from 'styled-components'

import FlickityComponent from 'react-flickity-component'
import 'flickity/css/flickity.css'

const ImagesContainer = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`

const flickityOptions = {...}

function UserImages(props) {

    const userPictures = props.images;

    if (userPictures) {
        const UserImagesArray = () => {
            return (
                userPictures.map((text, index) => 
                    <img id={`profile-image-${index}`} src={text.url} alt={text.name} key={text.name} />
                    // onClick={() => openModal(text._id)}
            ));
        }

        const UserImagesJsx = () => {
            return (
                <ImagesContainer>
                    <FlickityComponent className={'carousel'} elementType={'div'} options={flickityOptions}>
                        <UserImagesArray/>
                    </FlickityComponent>
                </ImagesContainer>
            );
        }
    }

    return (
        <ImagesContainer>
            { userPictures && <UserImagesJsx/> }
        </ImagesContainer>
    );  
}

export default UserImages;

Answer 1

正如 TKoL 所说，const 是块作用域，因此如果不满足条件，您的变量将不会被声明。你也可以试试这个：

 function UserImages(props) {

      const userPictures = props.images;

      if (userPictures) {
        const UserImagesArray = () => {
          return (
            userPictures.map((text, index) =>
              <img id={`profile-image-${index}`} src={text.url} alt={text.name} key={text.name} />
              // onClick={() => openModal(text._id)}
            ));
        }

        const UserImagesJsx = () => {
          return (
            <ImagesContainer>
              <FlickityComponent className={'carousel'} elementType={'div'} options={flickityOptions}>
                <UserImagesArray />
              </FlickityComponent>
            </ImagesContainer>
          );
        }

        return (
          <ImagesContainer>
            {userPictures && <UserImagesJsx />}
          </ImagesContainer>
        );

      } else {

        return null;

      }


    }

Answer 2

const 是块作用域——尝试在 if 语句之前声明它。

let UserImagesJsx;
if (userPictures) {
  ...
  UserImagesJsx = () => ...
}