如何在地图组件内部进行地图绘制？

Question

有一个 return 语句映射到数组内部并返回一些数据。如果在 category 中有另一个数组并且对于正确的数据它应该是category={item.category}中的另一个地图怎么办。组织这个的最佳解决方案是什么？谢谢。

  <div className="portfolio__container">

      {projects.map((item, key) =>

        item.filtered === true ? (

          <div>

            <ProfileCard

              key={key}

              name={item.name}

              title={item.title}

              image={item.image}

              className="border-box"

              exerpt={item.exerpt}

              git={item.git}

              url={item.url}

              category={item.category}

              click="Push"

              sans-serif

              mb0-l

              mb3

              flex-none

              w5

              mr3

            />

          </div>

        ) : (

          ""

        )

      )}

    </div>

数据

{

  name: `object`,

  title: `3 title`,

  image: `photo-2.jpg`,

  exerpt: `some 3 project`,

  git: `https://github.com/desmukh/gatsby-starter-woo/tree/master/`,

  url: `https://www.gatsbyjs.com/plugins/gatsby-plugin-smoothscroll/`,

  category: ["all23423423", "mobile", "ux-ui", "others"],

},

组件样式

export const ProfileCard = ({

  name,

  title,

  click,

  exerpt,

  image,

  git,

  url,

  category,

  ...props

}) => (

  <Card {...props}>

    <Box tc>

      <Avatar src={image} title={`Photo of ${name}`} dib />

      <Button href={git}> {click}</Button>

      <Button href={url}> {click}</Button>

      <Heading level={2} f3 mb2>

        {name}

      </Heading>

      <Text f5 fw4 gray mt0>

        {exerpt}

      </Text>

      <Text>{category}</Text>

    </Box>

  </Card>

);

Answer 1

这可能是一个可能的解决方案。如果类别是字符串或数组，这将正确呈现。&nbsp; &nbsp; export const ProfileCard = ({&nbsp; name,&nbsp; title,&nbsp; click,&nbsp; exerpt,&nbsp; image,&nbsp; git,&nbsp; url,&nbsp; category,&nbsp; ...props}) => {&nbsp;const renderCategory = () => {&nbsp; &nbsp;if(Array.isArray(category)){&nbsp; &nbsp; &nbsp;return (<>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;category.map(cat => <Text>{cat}</Text>);&nbsp; &nbsp; &nbsp;}</>);&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp; return <Text>{category}</Text>;&nbsp;}&nbsp;return (<Card {...props}>&nbsp; &nbsp; <Box tc>&nbsp; &nbsp; &nbsp; <Avatar src={image} title={`Photo of ${name}`} dib />&nbsp; &nbsp; &nbsp; <Button href={git}> {click}</Button>&nbsp; &nbsp; &nbsp; <Button href={url}> {click}</Button>&nbsp; &nbsp; &nbsp; <Heading level={2} f3 mb2>&nbsp; &nbsp; &nbsp; &nbsp; {name}&nbsp; &nbsp; &nbsp; </Heading>&nbsp; &nbsp; &nbsp; <Text f5 fw4 gray mt0>&nbsp; &nbsp; &nbsp; &nbsp; {exerpt}&nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; {renderCategory()}&nbsp; &nbsp; </Box>&nbsp; </Card>)};