基于寵物型別的渲染卡

我試圖根據型別，在貓的時候渲染一張背景為紫色的卡片，在狗的時候渲染一張背景為藍色的卡片。該卡片被設計為每個動物都是獨一無二的。

狗卡 貓卡

json檔案

"動物": [...
    {
      "id": 1,
      "type": "Cat",
      
    },
    {
      "id": 2,
      "type": "狗"。
      
    }
  ]

AnimalAdopt.tsx

const AnimalAdopt = （{ animals }）=> {

return (
    <Card className="list-group">
        {animals.map((imals) => (
            <DogCard>

                <HeaderContainer>
                    <HeaderCard>
                        <Image>
                            <img src={animals.photo} width='120px' height='120px' alt='一只可愛的狗的圖片' />
                        </Image>
                
                        <姓名>{animals.name}</姓名>
                       
                    </HeaderCard>
                </HeaderContainer>

App.tsx

const url = 'http://localhost:3000/pets'/span>;
function App() {


  const [animals, setanimals] = useState(null)。

  useEffect(() => {
    axios.get(url).then((result) =>/span> {
      setanimals（result.data）。
    });
  }, []);

  return (

    <div> 
      < Header />
      {animals ? <AnimalAdopt animals={animals} /> : <Loading />> }。
    </div>


  );
}

export default App;

uj5u.com熱心網友回復：

 "動物": [
        {
          "id": 1,
          "type": "Cat",
    "color":"xyz color code".
          
        },
        {
          "id": 2,
          "type": "Dog",
    "color":"xyz color code".
          
        }
      ]

AnimalAdopt.tsx>

const AnimalAdopt =（{ animals }）=> {

return (
    <Card className="list-group">
        {animals.map((動物) => (
            <DogCard style={{backgroundColor:`${animal.color}}>

                <HeaderContainer>
                    <HeaderCard>
                        <Image>
                            <img src={animal.photo} width='120px' height='120px' alt='可愛狗狗的圖片' />
                        </Image>
                
                        <姓名>{animal.name}</姓名>
                       
                    </HeaderCard>
                </HeaderContainer>

uj5u.com熱心網友回復：

"動物"。[ { "id": 1, "型別": "貓"。 "顏色": "xyz顏色代碼"

}, { "id": 2, "type": "Dog", "color":"xyz color code". } ]

AnimalAdopt.tsx

const AnimalAdopt = ({ animals }) => {

回傳 ( {animals.map((動物) => ( <DogCard style={{backgroundColor:${animal.color}}}>

 <HeaderContainer>
                <HeaderCard>。
                    <Image>/span>
                        <img src={animal. photo} width='120px'/span> height='120px' alt='可愛狗狗的圖片' /> 
                    </Image> 
            
                    <Name>{animal.name}</Name>/span>
                   
                </HeaderCard>/span>
            </HeaderContainer> 

或者你可以使用這樣的簡單方法

},
{
  "id"/span>: 2,
  "type": "狗"。
  
}

] AnimalAdopt.tsx

const AnimalAdopt = ({ animals }) => {

回傳 ( {animals.map((imals) => ( <DogCard style={{backgroundColor:#${Math.floor(Math.random()*16777215).toString(16)}}>

 <HeaderContainer>
                <HeaderCard>。
                    <Image>/span>
                        <img src={animals. photo} width='120px'/span> height='120px' alt='可愛狗狗的圖片' /> 
                    </Image> 
            
                    <Name>{animals.name}</Name>/span>
                   
                </HeaderCard>/span>
            </HeaderContainer>

標籤：

上一篇：從包含JSON的列中剝離字串

下一篇：如何在PHP中處理來自多個回應的JSON資料？