在 react js 中使用 useState 鈎子查看更多和更少查看

Question

我對反應和使用狀態掛鈎很新鮮（仍在學習）。 我想使用圖像數組和 React 鈎子創建顯示更多/更少按鈕。 我將圖像導入 div，我想在最后一個按鈕上設置按鈕，並在單擊按鈕時顯示圖像。

我收到錯誤消息：

text.slice 不是 function

問題是，代碼是使用 function 組件編寫的。

這是我的代碼：

import React from 'react';
import { useState } from 'react';
import '../assets/css/Product.css';

const ReadMore = ({ children }) => {
    const text = children;
    const [isReadMore, setIsReadMore] = useState(true);
    const toggleReadMore = () => {
        setIsReadMore(!isReadMore);
    };
    return (
        <p className='text'>
            {isReadMore ? text.slice(0, 150) : text}
            <span onClick={toggleReadMore} className='read-or-hide'>
                {isReadMore ? '...read more' : ' show less'}
            </span>
        </p>
    );
};

export const Product = () => {
    const card_image = [
        {
            image: 'CLT_Food_BeverageBar.jpg',
            title: 'Charlotte',
            subtitle: '(CLT)',
            button: 'Explore Lounge',
        },
        {
            image: 'Centurion_Cropped_0001_Bar.jpg',
            title: 'Dallas',
            subtitle: '(DFW)',
            button: 'Explore Lounge',
        },
        {
            image: 'DEN_GameRoom-LR_1200x540.jpg',
            title: 'Denver',
            subtitle: '(DEN)',
            button: 'Explore Lounge',
        },
        {
            image: 'IAH_Bar&Buffet_1200x600.jpg',
            title: 'Houston',
            subtitle: '(IAH)',
            button: 'Explore Lounge',
        },
        {
            image: 'amxtcl_Lounge_01_cmyk_1200x600.jpg',
            title: 'Las Vegas',
            subtitle: '(LAS)',
            button: 'Explore Lounge',
        },
        {
            image: 'LAX_hero.jpg',
            title: 'Los Angeles',
            subtitle: '(LAX)',
            button: 'Explore Lounge',
        },
        {
            image: 'LoungeAreaTalent1200x600.jpg',
            title: 'Miami',
            subtitle: '(MIA)',
            button: 'Explore Lounge',
        },
        {
            image: 'JFK_Carousel_3.jpg',
            title: 'New York',
            subtitle: '(JFX)',
            button: 'Explore Lounge',
        },
    ];

    return (
        <div>
            <div className='container'>
                <ReadMore>
                    <div className='row introduction'>
                        {card_image.map((card) => (
                            <div className='col-lg-3 pt-5'>
                                <div
                                    className='location_card'
                                    style={{
                                        backgroundImage: `url(${process.env.REACT_APP_ASSET_URL}/card_image/${card.image})`,
                                        objectFit: 'cover',
                                    }}>
                                    <div className='location-overly'>
                                        <h3 className='h2'>
                                            {card.title}
                                            <br />
                                            {card.subtitle}
                                        </h3>
                                        <button
                                            type='button'
                                            class='btn_product '>
                                            {card.button}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </ReadMore>
            </div>
        </div>
    );
};

Answer 1

我認為您應該使用條件渲染，這意味着當 state 發生變化時，您的 UI 也會發生變化。 抱歉，我認為我解釋得不是很好，所以這里有一些示例代碼。

import * from x "xyz xyz";

const App = () => {
   const [showMore, setShowMore] = useState(false);
   
   if(showMore){
      return(
          <MoreStuff/>
       );
   }

   return(
      <DefaultStuff/>
    );
}
          

資源：

https://www.digitalocean.com/community/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications

https://www.w3schools.com/react/react_conditional_rendering.asp

https://zh-hans.reactjs.org/docs/conditional-rendering.html