如何根据 React 中常量的 属性 有条件地渲染组件？

Question

我想根据常量的 header 属性 有条件地渲染一个组件。 基本上如果 header 是 Woffy --> Render Component1 这是我的代码：

import React from 'react';
import Component1 from '../Collection/Component1';
import Component2 from '../Collection/Component2';

const pets = [
  {
    header: 'Woffy',
    image: '/img/dog.png'
  },
  {
    header: 'kitty',
    image: '/img/cat.png'
  },

class demo class extends React.Component{
render(){
return(
<div>
{header === "Woofy" && <Component1 />}
{header === "kitty" && <Component2 />}
</div>
)
}
}

Answer 1

Well I have a react dropdown component <Dropdown/> from Fluent UI, I want to display the component based in the dropdown selection, wich I want to asign from the header property. is that possible ? This is my dropdown <Dropdown items={pets} placeholder="Zoo world" />

您可以使用您作为下拉状态value的变量，然后比较变量来渲染组件。

import React from "react";
import { Dropdown } from "@fluentui/react-northstar";
const pets = [
    {
      key: "1",
      header: "Woffy",
      image: "/img/dog.png"
    },
    {
      key: "2",
      header: "kitty",
      image: "/img/cat.png"
    }
  ];

const DropdownExample = () => {
  const [dropdownValue, setDropdownValue] = React.useState("3");
  console.log(dropdownValue);
  return (
    <Dropdown
      items={pets}
      value={dropdownValue}
      onChange={(_, data) => setDropdownValue(data.value.header)}
    />
  );
};

现在将此 dropdownValue 变量与渲染组件进行比较。

<div>
{dropdownValue === "Woofy" && <Component1 />}
{dropdownValue === "kitty" && <Component2 />}
</div>

Answer 2

您可以使用 Array.map 方法检查 header 值，然后 return 所需的输出。

<div>
  {pets.map((e) => {
    if (e.header === "Woffy") {
      return <Component1 />;
    } else if (e.header === "kitty") {
      return <Component2 />;
    } else {
      return null;
    }
  })}
</div>;