如何将可变数量的道具传递给 React 中的 JSX 标签

Question

我正在尝试创建一个包含许多“展示”页面的网站。在他们每个人上，我都有可变数量的图像（并不总是相同的数量），并且我使用道具将图像传递到各自 JSX 标签中的每个页面，如下所示。但我不想拥有： const {title, image1, image2, image3, etc} = props

有没有一种方法可以让我使用单个图像道具并在我的 JSX 标记中多次使用它来处理任意数量的图像？

下面的代码是我想要实现的，但它当然不起作用。

曲棍球.js

class Sport extends Component { 
  render() {
   return ( 
    <div> 
       <Pages title="Hockey" image={hockey1, hockey2, hockey3}/>
       <Pages title="Football" image={foot1, foot2}/>

    </div>

    )
  }
}    

Pages.js

const Pages = props => {
    const { title, image } = props
    return ( <div></div>)
}

Answer 1

您可以使用数组来传递图像列表；

class Sport extends Component { 
  render() {
   return ( 
    <div> 
       <Pages title="Hockey" images={[hockey1, hockey2, hockey3]} />
       <Pages title="Football" images={[foot1, foot2]} />
    </div>
    )
  }
}    

然后在你的组件中使用：

const  Pages = props => {
  const {title, images} = props;

  return (<div class="pages">
    {images.map((image, index) => (
      <div class="page" key={index}>
        <img src={image} />
      </div>
    )}
   </div>);
}