React利用网页实现传递一个数组,并在组件中实现完成数组的打印
时间: 2024-05-07 17:15:58 浏览: 131
利用React高阶组件实现一个面包屑导航的示例
首先,我们需要创建一个包含数组的父组件,将数组作为props传递给子组件。
```javascript
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const myArray = ['apple', 'banana', 'cherry'];
return (
<div>
<ChildComponent array={myArray} />
</div>
);
};
export default ParentComponent;
```
接下来,我们需要在子组件中接收props并打印数组。
```javascript
import React from 'react';
const ChildComponent = (props) => {
const { array } = props;
return (
<div>
{array.map((item, index) => (
<p key={index}>{item}</p>
))}
</div>
);
};
export default ChildComponent;
```
在子组件中,我们使用了map方法来遍历数组并将每个元素渲染为一个p标签。我们还为每个p标签设置了一个唯一的key属性,以帮助React更有效地更新组件。
最后,我们可以在父组件中渲染子组件来查看数组是否成功地传递并打印出来了。
```javascript
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const myArray = ['apple', 'banana', 'cherry'];
return (
<div>
<ChildComponent array={myArray} />
</div>
);
};
export default ParentComponent;
```
阅读全文