javascript - 如何通过功能设置 Prop

我是React的新手，我知道这是一个小问题，但我不知道如何解决。

我需要做一个以上的心脏按钮，并将我标记为paramether的prop isChecked更改为true或false，因此按钮将从HeartNormal更改为HeartFull。

代码无法执行此操作，因为每个按钮都需要分别在HeartNormal和HeartFull之间进行更改。

import React, { Component } from 'react';

class Test extends Component {
    handleLike = props =>{
        props.isCheck = true;
    }
    renderer(){
        return(
            <div>
            <Heart isClicked={false} onClick={() => this.handleLike(this.props)}/>
            <Heart isClicked={false} onClick={() => this.handleLike(this.props)}/>
            <Heart isClicked={false} onClick={() => this.handleLike(this.props)}/>
            <Heart isClicked={false} onClick={() => this.handleLike(this.props)}/>
            <Heart isClicked={false} onClick={() => this.handleLike(this.props)}/>
            </div>
        )
    }
}
function Heart(props){
    const isClicked = props.isClicked;
    if(isClicked){
        return <button onClick={props.onClick}><i className="fas fa-heart"></i></button>
    }else{
        return <button onClick={props.onClick}><i className="far fa-heart"></i></button>
    }
}
export default Test;

在handleLike中，还有另一个参数可以将喜欢的帖子的ID邀请到节点服务器，因为这是为我编写代码的理想结构。我希望有人可以帮助我解决此问题。

最佳答案

您需要使Heart成为具有状态的组件，然后您拥有的每个Heart都会分别具有状态并呈现不同的状态

import React, { Component } from 'react';

class Test extends Component {
//should be render
    render(){
        return(
            <div>
              <Heart isClicked={false} />
              <Heart isClicked={false} />
              <Heart isClicked={false} />
            </div>
        )
    }
}

class Heart extends Component {

    constructor(props){
        super(props)
        this.state = {
            clicked: this.props.isClicked
        }
    }

    handleClick = () => {
        this.setState({clicked: !this.state.clicked})
    }

    render(){
        const {clicked} = this.state
        return(<button onClick={() => this.handleClick()}>
                <i className={clicked ? "fas fa-heart" : "far fa-heart"}></i>
               </button>)
    }
}

export default Test;