1

我对 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。

4

1 回答 1

0

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

于 2019-01-04T12:41:32.283 回答