根据react js中的返回值显示两个不同的组件

Question

我有搜索功能，在输入文本时，它从数组返回对象（json数据）并根据条件（无论是否作为对象）我需要显示两个不同的组件，即。列表中包含匹配的字段和“找不到匹配的结果”组件。

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTextData: '',
      isSearchText: false,
      isSearchOpen: false,
      placeholderText:'Search Content',
      filteredMockData: [],
      dataArray: []
    };
  }
  handleSearchChange = (event, newVal) => {
    this.setState({ searchTextData: newVal })
    if (newVal == '') {
      this.setState({ clearsearch: true });
      this.setState({
        filteredMockData: []
      });
      this.props.onDisplayCloseIcon(true);
      
    } else {
      this.props.onDisplayCloseIcon(false);
      searchData.searchResults.forEach((item, index, array) => {
      this.state.dataArray.push(item);
    });
    this.setState({ filteredMockData: this.state.dataArray });
    }
  }
  clearInput = () => {
    this.setState({ searchTextData: '' })
  }
  isSearchText = () => {
    this.setState({ isSearchText: !this.state.isSearchText });
  }
  onSearchClick = () => {
    this.setState({ isSearchOpen: !this.state.isSearchOpen });
    this.setState({ searchTextData: '' });
    this.props.onDisplayCloseIcon(true);
  }

  renderSearchData = () => {
    const SearchDatasRender = this.state.dataArray.map((key) => {
      const SearchDataRender = key.matchedFields.pagetitle;
      return  (<ResultComponent results={ SearchDataRender } /> );
    })
    return SearchDatasRender;  
  }
  renderUndefined = () => {
    return ( <div className = "search_no_results" >
             <p> No Recent Searches found. </p> 
             <p> You can search by word or phrase, glossary term, chapter or section.</p> 
            </div>
    );
  }
  render() {
    return ( <span>
    <SearchIcon searchClick = { this.onSearchClick } /> 
    {this.state.isSearchOpen &&
      <div className = 'SearchinputBar' >
        <input
          placeholder={this.state.placeholderText}
          className= 'SearchInputContent'
          value = { this.state.searchTextData}
          onChange = { this.handleSearchChange }
        /> 
      </div>
    }
    {this.state.searchTextData !== '' && this.state.isSearchOpen &&
    <span className='clearText'>
      <ClearIcon className='clearIcon' clearClick = { this.clearInput }/>
    </span>
    } 
  {this.state.searchTextData !== '' && this.state.isSearchOpen &&
  <div className="SearchContainerWrapper"> 
    <div className = "arrow-up"> </div>
    <div className = 'search_result_Container' >
        <div className = "search_results_title" > <span> Chapters </span><hr></hr> </div> 
        <div className="search_show_text" >
          <ul className ="SearchScrollbar"> 
            {this.state.filteredMockData.length ? this.renderSearchData() : this.renderUndefined() }
          </ul>
        </div>              
    </div>
  </div>}
  </span>
  );
  }
}
Search.propTypes = {
  intl: intlShape.isRequired,
  onSearchClick: PropTypes.func,
  isSearchBarOpen: PropTypes.func,
  clearInput: PropTypes.func,
  isSearchText: PropTypes.func
};

export default injectIntl(Search);

搜索是我的父组件，并根据匹配的值，我需要显示像

这样的resultComponent

class ResultComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };

  }
  
  render(){
  	console.log(this.props.renderSearchData(),'Helloooo')
    return(<p>{this.props.renderSearchData()}</p>)

  }

  
}

ResultComponent.propTypes = {
  results: PropTypes.string.isRequired
};

我收到错误“renderSearchData不是函数”。我是新手做出反应并希望有人可以提供帮助。

Answer 1

传递给prop组件的唯一ResultComponent是results

所以在ResultComponent组件替换

this.props.renderSearchData()

用

this.props.results