Question

我是React的初学者，想知道如何使用道具来修改值。

f.e：

我有一个带@observable值的MobX GameStore.tsx：

export class GameStore {
    @observable money = 0;
    @observable CPS = 0;
    @observable taskCodeLines = 0;
    @observable taskCodeLinesTarget = 10;

...

    @observable staffFrontEndCount = 4;
    @observable staffFrontEndStartCost = 100;

    @observable staffPHPCount = 2;
    @observable staffPHPStartCost = 250;
}

现在我想在 Staff 类中拥有一些 StaffMember 对象：

render() {
    return(
        <div className="staff">
            <ul className="staff-list">
                <StaffMember job="Front End Developer" count={ gameStore.staffFrontEndCount } startCost = { gameStore.staffFrontEndStartCost } />
                <StaffMember job="PHP Developer" count={ gameStore.staffPHPCount } startCost = { gameStore.staffPHPStartCost } />
            </ul>
        </div>
    );
}

我传递了一些数据，比如这个对象的名称和一些值。现在我想修改其中一些，例如：

@observer
export default class StaffMember extends React.Component<any, any> {

@computed get increaseStaffCount() {
    return this.props.count;
}


@action hireStaff() {
    let cost = this.props.startCost * 1.4 * (this.props.count + 1);

    if (gameStore.money >= cost) {
        gameStore.money -= cost;

        this.props.count += 1; // It's illegal because props data is read-only
        this.countCPS();
    }


}

我该怎么做？可以创建如上所述的逻辑吗？我应该如何在react中创建类的实例并为它们构建泛型方法？谢谢你的帮助;）

Answer 1

答案就是在将StaffMember内部的道具传递到状态之后然后从那里你可以修改状态：）

Answer 2

React不允许在组件生命周期内修改props值。目前有两种方法可以改变道具的价值。

将其加载到状态
利用Redux

在第一项上，正如xSkrappy之前所说，你可以将道具加载到Component的状态，可以在组件的生命周期中更新，以下列方式在Component中添加此方法：

componentDidMount() {
    this.setState({ count: this.props.count })
}

这将在组件中创建一个本地状态，该状态等于从其父组件传递给组件的prop值。你可以从那里开始改变它。

当componentWillReceiveProps值在其父组件中发生更改时，您还可以使用props生命周期方法重新呈现组件，如下所示：

componentWillReceiveProps(nextProps) {
    if(nextProps.count !== this.props.count) {
        this.setState({ count: nextProps.count })
    }
}

第二种方法涉及使用Redux，一个可以在React应用程序中使用的状态容器。其模式涉及创建store，其中可以管理整个应用程序的状态，并且任何给定组件都可以连接到该存储，并将该状态作为props接收。

虽然使用Redux比使用第一个选项复杂得多，但最终您可以获得更多自由，因为您可以使应用程序中的任何组件都可以访问count值！

遗憾的是，在这个答案中实现Redux的过程太长了，所以我会指导你到我认为是good guide来重构你的应用程序以使用Redux，如果你想要这个选项

Answer 3

在ReactJs中，道具是不可变的，因此您无法对其进行修改。您可以使用Props来代替State。 State是可变的，您可以对其进行修改。或者，您可以根据需要使用Redux概念。例如：-首先建立一个状态

this.state = {
    usersList:[]
};

然后您可以像这样在您的状态下添加修改

componentDidMount() {
    this.setState({ usersList: this.props.count})
}

如何修改props传递的值

3 个答案: