使用开关反应条件渲染

Question

我想根据父组件传递的道具渲染一个组件，然后在子组件中我使用 switch 语句评估道具。我无法获得基于 props.length 的 return 元素。我一直在寻找在反应中正确使用条件渲染的方法，但我的代码中似乎出了点问题，直到现在我才意识到。

//Countries.tsx
import React from "react";
import ListCountries from "./ListCountries";
import Country from "./Country";

const Countries = ({ data }) => {
  let dataLength = data.length;
  let component = null;
  switch (dataLength) {
    case dataLength === 1:
      component = <Country data={data} />;
      break;
    case dataLength > 1:
      component = <ListCountries data={data} />;
      break;
    case dataLength > 10:
      component = <div>Too many matches, specify another filter</div>;
      break;
    default:
      component = <p>Else statement</p>;
      break;
  }

  return <>{component}</>;
};

export default Countries;

export default function App() {
  const [countries, setCountries] = useState([]);
  const [filteredCountries, setFilteredCountries] = useState([]);
  const [query, setQuery] = useState(undefined);

  useEffect(() => {
    axios.get("https://restcountries.eu/rest/v2/all").then(res => {
      setCountries(res.data);
    });
  }, [query]);

  const inputSearchHandler = e => {
    setQuery(e.target.value);
    const res = countries.filter(country =>
      country.name
        .toLocaleUpperCase()
        .includes(e.target.value.toLocaleUpperCase())
    );
    setFilteredCountries(res);
  };

  console.log("countries : ", countries);
  console.log("countries length: ", countries.length);
  console.log("filtered : ", filteredCountries);
  console.log("filtered length: ", filteredCountries.length);
  return (
    <div className="App">
      <SearchField inputSearchHandler={inputSearchHandler} />
      <Countries data={filteredCountries} />
    </div>
  );
}```

Answer 1

您的代码有一些问题，但我能够让它工作：

switch 语句不是为“大于”/“小于”语句构建的。通常，开关是这样使用的：
```
 switch(number) {
     case 1: dothis();
     case 2: dothat();
 }
```
有一个解决方法，您可以这样做：
```
 switch(true) {
     case number > 1: dothis();
     case number < 1: dothat();
 }
```
但我会坚持 if、else if 和 else 声明。
您在这一行中犯了一个小错误：
```
 case dataLength > 1:
       // do something
 case dataLength > 10:
       // do something else
```
如果我们假设 dataLength 是 11，它仍然会执行第一个 case，因为条件 dataLength > 1 为真。要解决此问题，请确保将第一条语句更改为 case dataLength > 1 && dataLength < 10
我做了一些小改动以使代码更具可读性。

这是最终结果：

import React from "react";
import ListCountries from "./ListCountries";
import Country from "./Country";

const Countries = ({ data }) => {
  const getComponent = () => {
    let dataLength = data.length;    
      if (dataLength === 1) return <Country data={data} />;
      else if (dataLength > 1 && dataLength < 10) return <ListCountries data={data} />;
      else if (dataLength > 10) return <div>Too many matches, specify another filter</div>;
      else return <p>Else statement</p>;    
  };

  return getComponent();
};

export default Countries;

使用开关反应条件渲染

React Conditional Rendering using switch

reactjs

conditional-rendering