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

【问题标题】：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

【问题讨论】：

标签： reactjs render stateless

【解决方案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>
    );
  }
}

【讨论】：