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

Posted 2023-02-21

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

【英文标题】：How to pass a variable number of props to a JSX tag in React

【发布时间】：2020-03-03 15:55:59

【问题描述】：

我正在尝试创建一个包含许多“展示”页面的网站。在他们每个人上，我都有可变数量的图像（并不总是相同的数量），并且我使用道具将图像传递到各自 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>)

【问题讨论】：

你不能只使用一组图像作为道具吗？

【参考方案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>);

【讨论】：

这听起来如此明显，简直不敢相信我没有想到这一点。谢啦。现在就试试。

用例子更新答案。

它有效，但现在我有： 如果我的页面只有 2 或 4 张图片，我该怎么办？

参见示例。使用循环。

注意<Pages title="Football" images=[foot1, foot2] /> 会在每次渲染时创建一个新数组！这意味着页面将在每次Sport 呈现时重新呈现