如何将带有参数的回调函数从父组件传递给子组件？答案

【问题标题】：How to pass callback functions with parameters from parent to child components?如何将带有参数的回调函数从父组件传递给子组件？
【发布时间】：2019-05-30 23:12:12
【问题描述】：

我对 ReactJS 框架真的很陌生。我正在尝试将回调函数从父组件传递给子组件。

我要传递的是一个回调函数 (changeState) 到子组件。子组件是一个fabric-ui按钮，点击按钮时会调用这个函数。

父代码：只有必要的代码

public constructor(props: {}) {
    super(props);

    this.state = {
      columns: [],
      hasError:false,
      sortedItems: []
    };  
    this.changeState = this.changeState.bind(this);
  }
public changeState = (itemId:React.ReactText)=>{
    const resolvedKey='Status';
    const idKey='Status';
    const item = this.state.sortedItems!.filter(ite => ite[idKey] === itemId)[0];
    item[resolvedKey] = 'Résolu';
  }
<ResolveButton disabled={isResolved} uniqueId={fieldContent} changeState={this.changeState  } />

子代码

import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import * as React from 'react';

export interface IHandleChange {
    changeState: (itemId:React.ReactText)=>void;
    disabled:boolean;
    uniqueId:string| number;
}
export class ResolveButton extends React.Component<IHandleChange, {}> {
    constructor(props:any) {

        super(props);
    }
    public handleClick = () => {
        this.props.changeState(this.props.uniqueId);
        alert(`Item ${this.props.uniqueId}`);
    }

    public render(): JSX.Element {
        return (
            <div>
                {
                    !this.props.disabled && 
                    <PrimaryButton
                        data-automation-id="test"
                        text="Résolu"
                        onClick={this.handleClick}
                        allowDisabledFocus={true}
                    />
                }
            </div>
        );
    }
}
export default ResolveButton;

问题是当我执行上面的代码时甚至没有创建子组件。但是，当我不传递回调函数（changestate）时，会创建子组件。这与传递给子组件的参数 disabled 和 uniqueId 无关。我想说的是，如果我尝试在子节点界面中删除 changeState，则子组件会很好地创建，但是一旦我在界面中引入 changeState 并尝试从父组件传递它，子组件就永远不会显示在DOM。

【问题讨论】：

对不起，我不明白问题本身，你的最后两句话。你能详细描述一下吗？因此，仅当禁用的道具为 false.. 时才会呈现按钮。isResolved 变量来自父级？它不是国家的一部分吗？
我修改了我的问题以尝试回答您的问题。请看一看。

标签： reactjs function components office-fabric

【解决方案1】：

如果isResolved 变量不是父组件状态的一部分，则其更改不会重新渲染树。这可能是问题所在。

【讨论】：