React：根据条件显示不同的组件

Question

我有一个 React 应用程序，用户可以在其中搜索数据库中的文件。单击表单上的搜索按钮后，会出现一个新的 window 和结果；但是，如果没有搜索结果，我希望显示一个不同的组件来指示没有搜索结果。

在表格所在的窗格中，这是我拥有的：

export default function PersistentDrawerLeft() {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const [showSearchForm, setShowSearchForm] = React.useState(true);
  const [showSubscribeForm, setShowSubscribeForm] = React.useState(true);
  const [showUploadForm, setShowUploadForm] = React.useState(true);
  const [showSearchResults, setShowSearchResults] = React.useState(false);
  const [searchResults, setSearchResults] = React.useState({});
  const [showBoundingBox, setShowBoundingBox] = React.useState(false);
  const [showNoResults, setShowNoResults] = React.useState(false);

  ...

    const getSearchStatus = (status) => {
    if (status === true) {
      setShowSearchForm(false);
      setShowSubscribeForm(true);
      setShowUploadForm(true);
      setShowSearchResults(true);
      setShowNoResults(true);
      setShowBoundingBox(true);
    }
  }

  const getSearchResults = (results) => {
    if(Object.keys(results).length > 0) {
      console.log("Ready to render search results!");
      console.log(results);
      setSearchResults(results);
    }
  }

  function identifySearchResults(results) {
    if(Object.keys(results).length > 0) {
      console.log("It is true!");
      return true;
    }
    else {
      console.log("It is false!");
      return false;
    }
  }

  const getReturnToSearchStatus = (status) => {
    if (status === true) {
      setShowSearchForm(true);
      setShowSubscribeForm(true);
      setShowUploadForm(true);
      setShowSearchResults(false);
      setShowNoResults(false);
      setShowBoundingBox(false);
    }
  }

  function SearchFormWrapper(props) {
    if (!props.show) {
      return null;
    }
  
    return (
      <SearchForm 
        searchInProgress={getSearchStatus}
        latestSearchResults={getSearchResults}
      ></SearchForm>
    );
  }

  function SearchResultsWrapper(props) {
    if (!props.show) {
      return null;
    }
  
    return (
        <ResultsContainer 
        returnToSearchStatus={getReturnToSearchStatus}
        resultsToRender={searchResults}
      ></ResultsContainer>
    );
  }

稍后在同一文件中（在 return 语句中），我尝试执行此条件语句

<TabPanel value={value} index={0}>
              <SearchFormWrapper show={showSearchForm}></SearchFormWrapper>
              { identifySearchResults  ? <SearchResultsWrapper show={showSearchResults}></SearchResultsWrapper> : <NoSearchResultsWrapper show={showNoResults}></NoSearchResultsWrapper>}
</TabPanel>

但它不是有条件地显示结果。

Answer 1

您需要将 searchResults 对象传递给函数 identifySearchResults 以便它传递给 return true 或 false.

它应该像这样工作：

<TabPanel value={value} index={0}>
  <SearchFormWrapper show={showSearchForm} />
  {identifySearchResults(searchResults)  
    ? <SearchResultsWrapper show={showSearchResults} />
    : <NoSearchResultsWrapper show={showNoResults} />}
</TabPanel>

React：根据条件显示不同的组件

React: Show different components based on conditions

javascript

components

reactjs