在ReactJS中,可以通过使用数组的filter方法来根据传递给道具的id号过滤渲染结果。具体步骤如下:
以下是一个示例代码:
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [filterId, setFilterId] = useState('');
const handleFilterChange = (event) => {
setFilterId(event.target.value);
};
return (
<div>
<input type="text" value={filterId} onChange={handleFilterChange} />
<ChildComponent filterId={filterId} />
</div>
);
}
export default ParentComponent;
// 子组件
import React from 'react';
function ChildComponent({ filterId }) {
const data = [
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
];
const filteredData = data.filter((item) => item.id === filterId);
return (
<ul>
{filteredData.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default ChildComponent;
在上述示例中,父组件中的输入框用于输入过滤的id号,通过onChange事件监听输入框的变化,并通过setState方法更新filterId的值。然后将filterId作为道具传递给子组件。子组件中使用filter方法对data数组进行过滤,只保留id号与filterId相等的元素,并使用map方法生成需要渲染的元素列表。最终,根据输入的id号,子组件会渲染对应的列表项。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云