javascript - react 保持渲染 Prop 包裹组件的状态

Question

我通过 children Prop 作为函数创建了以下渲染 Prop 组件:

export class GenericAbstractLoader extends React.Component<IGenericAbstractLoaderRenderProps, any> {
    constructor(props: IGenericAbstractLoaderRenderProps) {
        super(props);
    }

    public render() {
        return this.props.isLoading ? (
            <div className="generic-abstract-loader-wrapper">
                <div className="generic-abstract-loader">
                    <img src={loader} />
                </div>
                {this.props.children(this.props)}
            </div>
        ) : (
            this.props.children(this.props)
        );
    }
}

如果 isLoading 为 false，它实际上只是渲染包装的组件，或者如果 prop 为 true，则添加一层加载。 它“非常完美”地工作。

我确实在另一个组件中以这种方式调用它:

public render() {
    return (
        <div>
            <button onClick={this.justDisable}>JUST SET FALSE TO STATE</button>
            <br />
            <button onClick={this.enableDisable}>Disable/Enable Elements</button>
            <br />

            <GenericAbstractLoader customProp="custom prop" isLoading={this.state.shouldDisable}>
                {props => <HomeTestForm {...props} />}
            </GenericAbstractLoader>
        </div>
    );
}

如您所见，包装组件是一个简单的 HomeTestForm，它只包含一个输入文本:

export class HomeTestForm extends React.Component<IGenericAbstractLoaderHOCProps, any> {
    constructor(props: IGenericAbstractLoaderHOCProps) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'Initial Value' };
    }

    public render() {
        return (
            <div>
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
            </div>
        );
    }

    public handleChange(event: any) {
        this.setState({ value: event.target.value });
    }
}

我的问题是，当我切换 isLoading Prop 时，包装组件不会保留状态，因此如果我更改内部文本字段的值，在添加加载层时，并且在删除它时，不采用该值，因此输入字段仍使用初始值呈现。

使用 render props 创建持久包装组件的正确方法是什么？

Answer 1

您的组件状态正在重置，因为当您的加载状态发生变化时，React 正在创建一个全新的组件。如果将 console.log 添加到 HomeTestForm 的构造函数中，就可以看到这些。 React 认为这是必要的，因为 GenericAbstractLoader 中的三元运算符。如果您可以将 GenericAbstractLoader 中的 render 函数重构为类似于下面的示例，您可以为 React 提供跨渲染持久保存组件实例所需的上下文。

render() 
  return (
    <div className={this.props.isLoading ? "generic-abstract-loader-wrapper" : ""}>
      {this.props.isLoading && <img src={loader} />}
      {this.props.children(this.props)}
    </div>
  );
}

React 的文档在 Reconciliation 下对此有一个简短的部分。 .这种情况属于不同类型的元素标题。

此外，与您的问题无关，根据您当前的示例，您不需要使用渲染 Prop 。 GenericAbstractLoader 中的 render 函数可以只渲染 {this.props.children} 而无需函数调用，您可以将 Prop 直接放在 child 身上组件如下例所示。您可能只是简化了 SO 的示例，并且遇到需要渲染 Prop 的情况，但我想指出这一点以防万一。

<GenericAbstractLoader isLoading={this.state.shouldDisable}>
  <HomeTestForm customProp="custom prop" />
</GenericAbstractLoader