Question

我在react组件的state属性内有一个数组。如何访问该实例以更改渲染组成？

如何使用箭头功能访问“ hasDiscount”功能启用缩略图。因此，该价格为旧价格，其折价为精选价格。我想，如果对象在加载时有折扣价，则折扣价必须显示为主要价格。

import Thumbnail from './thumbnail';

class Thumbnails extends Component {
        state = {
        thumbnails: [
        {id: 1, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 1", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
        {id: 2, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 2", category1: 'component', category2: 'tabs', price: 994, hasDiscount: 0},
        {id: 3, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 3", category1: 'component', category2: 'tabs', price: 949, hasDiscount: 0},
        {id: 4, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 4", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
        ]
};

hasDiscountTag = () => {

        ))
}

render() {


return (
<div className="thumbnails-container">   
        <h2 className="section-title">Components</h2>
        <div className="thumbnails-container-wrapper"> 
        {this.state.thumbnails.map(thumbnail => (
                <Thumbnail 
                        onLoad = {this.hasDiscountTag()}
                        key={thumbnail.id} 
                        name={thumbnail.title} 
                        id={thumbnail.id} 
                        price={thumbnail.price} 
                        imageUrl={thumbnail.imageUrl} 
                        href={thumbnail.href}
                        category1={thumbnail.category1}
                        category2={thumbnail.category2}
                        hasDiscount = {thumbnail.hasDiscount}
                        >
                </Thumbnail>
        ))} 
        </div>     
</div>
);

}
}

export default Thumbnails;```

Answer 1

您可以尝试这种方法

 import Thumbnail from './thumbnail';

    class Thumbnails extends Component {
            state = {
            oldPrice: 0,
            thumbnails: [
            {id: 1, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 1", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
            {id: 2, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 2", category1: 'component', category2: 'tabs', price: 994, hasDiscount: 0},
            {id: 3, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 3", category1: 'component', category2: 'tabs', price: 949, hasDiscount: 0},
            {id: 4, imageUrl : "https://picsum.photos/200", href: "www.google.com", title: "title 4", category1: 'component', category2: 'tabs', price: 99, hasDiscount: 23},
            ]
    };

    hasDiscountTag = (price, hasDiscount) => {
         this.setState({oldPrice: price-hasDiscount})
            ))
    }

    render() {


    return (
    <div className="thumbnails-container">   
            <h2 className="section-title">Components</h2>
            <h2 className="section-title">Price: {this.state.oldPrice}</h2>
            <div className="thumbnails-container-wrapper"> 
            {this.state.thumbnails.map(thumbnail => (
                    <Thumbnail 
                            onLoad = {this.hasDiscountTag}
                            key={thumbnail.id} 
                            name={thumbnail.title} 
                            id={thumbnail.id} 
                            price={thumbnail.price} 
                            imageUrl={thumbnail.imageUrl} 
                            href={thumbnail.href}
                            category1={thumbnail.category1}
                            category2={thumbnail.category2}
                            hasDiscount = {thumbnail.hasDiscount}
                            >
                    </Thumbnail>
            ))} 
            </div>     
    </div>
    );

    }
    }

    export default Thumbnails;

我如何访问状态数组中的属性

1 个答案: