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

Question

我是 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

Answer 1

您应该将 <CardRender cards={cards}/> 添加到元素 render returns（在您想要的位置）并在 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>
    );
  }
}

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

How to render a stateless functional component from another component

render

stateless

reactjs