Reactjs 如何从另一个组件呈现无状态功能组件

我是新手。我写了一个有搜索组件的项目。搜索工作正常（我在

console.log

）上进行了检查，但我不知道如何调用无状态函数组件来显示搜索结果

class SearchCard扩展组件{
//qQuery是用于查询输入的变量
状态={qQuery:”“}；
HandleSearch=异步（e）=>{
e、 预防默认值（）；
const{data:cards}=wait cardService.getAllCards（）；
var searchResults=卡片。过滤器（（项目）=>
item.qTopic.includes（this.state.qQuery）|
item.qArticle.includes（this.state.qQuery）
);
this.setState（{cards:searchResults}）；
//log（'search results'，search results'，cards'，this.state）；
返回
}  
render（）{
返回(

---

constcardrender=（{cards，fav，onHandleFavs}）=>{
报税表（
{cards.length>0&&
卡片。地图（（卡片）=>
onHandleFavs（卡号）}
/>
}
);
}
导出默认CardRender；

您应该将

添加到元素

render

returns（在您希望的位置）中，并在

state.cards

不为空时进行渲染

像这样的

class SearchCard扩展组件{
//qQuery是用于查询输入的变量
状态={qQuery:”“}；
HandleSearch=异步（e）=>{
// ...
this.setState（{cards:searchResults}）；
}
render（）{
返回(
...
{cards？.length&&}
);
}
}

您应该将

添加到元素

render

returns（在您希望的位置）中，并在

state.cards

不为空时进行渲染

像这样的

class SearchCard扩展组件{
//qQuery是用于查询输入的变量
状态={qQuery:”“}；
HandleSearch=异步（e）=>{
// ...
this.setState（{cards:searchResults}）；
}
render（）{
返回(
...
{cards？.length&&}
);
}
}