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

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

这可能是一个可能的解决方案。如果类别是字符串或数组，这将正确呈现。

    export const ProfileCard = ({

  name,

  title,

  click,

  exerpt,

  image,

  git,

  url,

  category,

  ...props

}) => {

 const renderCategory = () => {

   if(Array.isArray(category)){

     return (<>{

         category.map(cat => <Text>{cat}</Text>);

     }</>);

   } 

    return <Text>{category}</Text>;

 }

 return (<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>

      {renderCategory()}

    </Box>

  </Card>)

};