如何修改 props 传递的值

Question

我是 React 的初学者，想弄清楚如何使用 props 修改值。

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 个对象 class:

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();
    }


}

我该怎么做？可以像上面那样创建逻辑吗？我应该如何在反应中创建 classes 的实例并为它们构建通用方法？感谢您的帮助 ;)

Answer 1

答案是在 StaffMember 中传递 props 之后将其置于状态中，然后您可以从那里修改状态:)

Answer 2

React 不允许在组件的生命周期中修改 props 值。目前有两种方法可以解决更改道具价值的需要。

载入状态
利用 Redux

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

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 而不是 Props。 State 是可变的你可以修改它。或者，您可以根据需要使用 Redux 概念。例如：- 首先创建一个状态

this.state = {
    usersList:[]
};

然后你可以像这样在你的状态中添加修改

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

如何修改 props 传递的值

How to modify value passed by props

javascript

reactjs

mobx