如何在ReactJS中基于條件不要重復自己（干）原則？

組件使用方法：

  import React from "react";
  import MyAvatars from "../../components/MyAvatar/MyAvatars";

  const About = () => {
   return (
  
    <MyAvatars
      topType={[true, 1000]}
      accessoriesType={[true, 1200]}
      facialHairType={["blank"]}
    />
   );
 };

 export default About;

這是我的代碼。我目前正在為此作業。

代碼：

  import React from "react";
  import Avatar from "avataaars";
  import { Top, Accessories, FacialHair } from "./avatarThings";

  const MyAvatar = ({ topType, facialHairType }) => {
  
  const [avatar, setAvatar] = React.useState({
      avatarStyle: "Circle",
      topType: "ShortHairDreads01",
      accessoriesType: "Blank",
      facialHairType: "Blank",
});


const topFunc = () =>{
    if (topType.length === 2) {
      const interval = setInterval(() => {
        setAvatar((prev) => {
          return {
            ...prev,
            topType:  Top[Math.floor(Math.random() * Top.length)],
          };
        });
      }, topType[1]); //this is time
      return () => clearInterval(interval);
    }
    setAvatar((prev) => {
      return {
        ...prev,
        topType: topType[0],
      };
    });
}

const FacialHairFunc = () =>{
      if (facialHairType.length === 2) {
      const interval = setInterval(() => {
        setAvatar((prev) => {
          return {
            ...prev,
            facialHairType: FacialHair[Math.floor(Math.random() * FacialHair.length)],
          };
        });
      }, facialHairType[1]);
      return () => clearInterval(interval);
    }
    setAvatar((prev) => {
      return {
        ...prev,
        facialHairType: facialHairType[0],
      };
    });
}

React.useEffect(() => {

  if (topType) {
    topFunc()
  }
  if (facialHairType) {
    FacialHairFunc()
  }

}, [])


return (
  <Avatar
    avatarStyle="Circle"
    topType={avatar.topType}
    accessoriesType={avatar.accessoriesType}
    hairColor={avatar.hairColor}
    facialHairType={avatar.facialHairType}
  />

 );
};

export default MyAvatar;

我是編程新手。我目前正在創建一個有用的開源 NPM 包。

這是它的代碼。一遍又一遍地重復相同的代碼。

我希望我能比這更容易地修改這段代碼，但我做不到。人們很容易欣賞你。我將通過您為此撰寫的代碼學習新事物。

如果您能提供幫助，我將非常高興。

請幫助并讓我知道您的貢獻。

謝謝 ：）

uj5u.com熱心網友回復：

您在有效計算隨機屬性的函式和更新頭像狀態的方面之間存在一些耦合。

我建議將選擇隨機屬性并更新狀態的每個“屬性”函式轉換為單個 React 鉤子，該鉤子接受屬性陣列和間隔，并回傳隨機屬性，然后簡單地將每個隨機選擇的屬性直接傳遞給Avatar組件。沒有令人信服的理由avatar在組件中擁有中間狀態。

例子：

const getRandomAttribute = arr => arr[Math.floor(Math.random() * arr.length)];

const useRandomAttribute = (attributes = [], valueArr = []) => {
  const [attribute, setAttribute] = useState(() => {
    if (valueArr[0]) {
      return getRandomAttribute(attributes);
    }
  });

  useEffect(() => {
    let timerId;
    if (valueArr[0] && valueArr[1] > 0) {
      timerId = setInterval(() => {
        const attribute = getRandomAttribute(attributes);
        setAttribute(attribute);
      }, valueArr[1]);
    }
    return () => clearTimeout(timerId);
  }, [attributes, valueArr]);

  return attribute;
};

應用程式

import React from "react";
import Avatar from "avataaars";
import { Top, Accessories, FacialHair, ..... } from "./avatarThings";

const MyAvatar = ({ topType, facialHairType, accessoriesType, hairType }) => {
  const accessory = useRandomAttribute(Accessories, accessoriesType);
  const face = useRandomAttribute(FacialHair, facialHairType);
  const hair = useRandomAttribute(Hair, hairType);
  const top = useRandomAttribute(Top, topType);

  return (
    <Avatar
      avatarStyle="Circle"
      topType={top || "ShortHairDreads01"}
      accessoriesType={accessory || "Blank"}
      hairColor={hair || "BrownDark"}
      facialHairType={face || "Blank"}
      clotheType="Hoodie"
      clotheColor="Red"
      eyeType="Wink"
      eyebrowType="Default"
      mouthType="Smile"
      skinColor="Brown"
    />
  );
};

您可以從此處調整代碼的間隔時間、其他默認/備用值等。

uj5u.com熱心網友回復：

您是否可以只創建一個決議所需引數的函式：

import React from "react";
import Avatar from "avataaars";
import { Top, Accessories, FacialHair } from "./avatarThings";

const MyAvatar = ({ topType, facialHairType }) => {

const [avatar, setAvatar] = React.useState({
    avatarStyle: "Circle",
    topType: "ShortHairDreads01",
    accessoriesType: "Blank",
    facialHairType: "Blank",
});

const typeFunction = (type, AvatarComponent) =>{
    if (type.length === 2) {
        const interval = setInterval(() => {
            setAvatar((prev) => {
                return {
                    ...prev,
                    type: AvatarComponent[Math.floor(Math.random() * AvatarComponent.length)],
                };
            });
        }, type[1]);
        return () => clearInterval(interval);
    }
    setAvatar((prev) => {
        return {
            ...prev,
            type: type[0],
        };
    });
}

React.useEffect(() => {
    if (topType) {
        typeFunction(type, Top)
    }
    if (facialHairType) {
        typeFunction(facialHairType, FacialHair)
    }
}, [])


return (
        <Avatar
            avatarStyle="Circle"
            topType={avatar.topType}
            accessoriesType={avatar.accessoriesType}
            hairColor={avatar.hairColor}
            facialHairType={avatar.facialHairType}
        />
    );
};

export default MyAvatar;

標籤：javascript 反应 npm 反应钩子 干燥

上一篇：重復識別符號'alpha'.deno-ts(2300)意外的關鍵字或識別符號

下一篇：具有版本控制限制的多S3存盤桶定義