Question

使用地图我想做的很简单。

我想这样称呼：

<Striper size={3} text={"Hey everybody!"}/>

要获取此信息：

<>
  <Stripe>
    <Stripe>
      <Stripe>
        Hey everybody!
      </Stripe>
    </Stripe>
  </Stripe>
</>

我尝试过这种方法，但失败了：

const Striper = (props) => {
    const contentTop=props.sizer.map((item)=> <Stripe>)
    const contentBottom=props.sizer.map((item)=> </Stripe>)

    return (
        <div>
          {contentTop}
          {contentBottom}
        </div>
    )
}

基本上只有这个可以工作（这不是我想要的）：

const contentTop = props.sizer.map((item)=> <Stripe></Stripe>)

我如何得到想要的东西？

Answer 1

该解决方案最终变得非常简单（感谢Emile）：使用.reduce。

正如关于reduce的文档中所说的那样，当您只需要退回一件事时，它真的很有用。这就是我所需要的。

为I said in a comment：

我想从<App size={2} text="Hello"/>返回的内容确实是 <Stripe><Stripe>Hello</Stripe></Stripe>，但是因为我必须返回一个整个对象，我可以随地图提供的最接近的对象是 <Stripe>Hello</Stripe><Stripe>Hello</Stripe>。

因此，请使用reduce。

这是解决方案，经过验证可以正常工作。（注意：当size={3}实际上是一个数组时，我有点不知所措，因为我知道该怎么做，这不是我的问题，但是您可以在下面的答案中看到我的实现）。

const Striper = (props) => {
  const content = props.sizer.reduce(
    (total, currentValue) => <Stripe color={props.colors}>{total}</Stripe>
  )    
  return (
    <div>
      {content}          
    </div>
  )
}

实际上就是这样：

const arr = Array(6).fill("this is my text!");    
return (
  <div>
    <Striper sizer={arr} colors={colours}/>
  </div>
);

Answer 2

我想您可以通过这种方法实现类似的目的：

from PIL import Image
with Image.open(r"ALLPARTS.png") as end:
    with Image.open(r"TOPLEFT.png") as img:
        end.paste(img,(0,0))
    with Image.open(r"BOTTOMLEFT.png") as img:
        end.paste(img,(0,223))
    with Image.open(r"BOTTOMRIGHT.png") as img:
        end.paste(img,(422,223))
    with Image.open(r"TOPRIGHT.png") as img:
        end.paste(img,(422,0))
    end.save(r"ALLPARTS.png")

这能回答您的问题吗？

Answer 3

根据您的情况，这是多种可能性的一种可能方式：

<Striper size={3} text={"Hey everybody!"}/>

export default ({ size, text }) => <><Stripe size={size} /> {text} <Stripe size={size} /></>;

export default ({ size }) => <>{ Array(size).fill().map(_ => <h3>Stripe!</h3>) }</>;

https://stackblitz.com/edit/react-tnqv2k

如何使用地图返回嵌套对象？

3 个答案: