时间戳

首页 > 解决方案 > 如何从函数中设置道具

javascript - 如何从函数中设置道具

问题描述

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

我需要制作多个心形按钮并将paramether我标记的道具更改isChecked为trueor 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 邀请到节点服务器，因为这是为我编写代码的理想结构。我希望有人可以帮助我解决这个问题。

标签： javascriptreactjs

解决方案

问题：你不能分配给 React 中的 props，因为它们是只读的。更新 props 的方式是更新父级发送给该组件的值。
意义<Test isCheck={/* change the value here */} />

解决方案：您可以使用React Hooks为每个单独Heart的组件使用状态。这样，每个都将有一个单独的状态，彼此独立，并且组件不需要跟踪每个状态。HeartTest

这是更新的代码：

import React, { Component } from 'react';

class Test extends Component {
    renderer(){
        return(
            <div>
            <Heart/>
            <Heart/>
            <Heart/>
            <Heart/>
            <Heart/>
            </div>
        )
    }
}
function Heart(props){
    const [isClicked, setIsClicked] = useState(false);

    return (
        <button onClick={() -> setIsClicked(true)}>
            <i className={clicked ? "fas fa-heart" : "far fa-heart"}></i>
        </button>
    );
}
export default Test;

推荐阅读