如何从另一个组件渲染无状态功能组件

Posted 2023-02-23

【中文标题】如何从另一个组件渲染无状态功能组件

【英文标题】：How to render a stateless functional component from another component

【发布时间】：2021-02-16 01:22:33

【问题描述】：

我是 React 的新手。我写了一个项目，其中有一个搜索组件。搜索工作正常（我检查了console.log）但我不知道如何调用应该显示搜索结果的无状态函数组件？

class SearchCard extends Component 
  // qQuery is a variable for query input
  state =  qQuery: "" ;
  
  HandleSearch= async (e) => 
    e.preventDefault();
    const data:cards  = await cardService.getAllCards();
    var searchResults = cards.filter((item) =>
      item.qTopic.includes(this.state.qQuery) || 
      item.qArticle.includes(this.state.qQuery)
    );
    this.setState( cards : searchResults ); 
    //   console.log('search results ',searchResults, '  cards ',this.state);
    return <CardRender cards=cards/> 
    

  render() 
    return (
      <React.Fragment>
        <form className="form" onSubmit= this.HandleSearch >
          <div className="input-group md-form form-sm form-1 pl-4 col-12">

---

const CardRender = (cards,favs,onHandleFavs) => 
  return (         
    <div className="row">
      cards.length > 0 &&
        cards.map((card) =>
          <Card key=card._id
            card=card 
            favs=favs 
            onHandleFavs=() => onHandleFavs(card._id)
          />
      
    </div>
 );

     
export default CardRender;

screenshot

【参考方案1】：

您应该将<CardRender cards=cards/> 添加到元素render 返回（在您想要的位置）并在state.cards 不为空时呈现它。

类似的东西

class SearchCard extends Component 
  // qQuery is a variable for query input
  state =  qQuery: "" ;
  
  HandleSearch= async (e) => 
    // ...
    this.setState( cards : searchResults ); 
  

  render() 
    return (
      <div>
        ...
        cards?.length && <CardRender cards=cards/>
      </div>
    );