Question

我有一个保存提示，当各种父组件将数据提交到服务器时出现。保存提示是一个非常简单的组件：

export class PromptComponent extends React.Component<{}, {}> {
constructor(props: any) {
    super(props)
}
public render(): JSX.Element {
    return (
        <div>
            {this.props.showAlert ? (
                <div id='alert-prompt'>
                    <span>{this.props.children}</span>
                </div>
            ) : null}
        </div>
    )
}
}

我的问题是在父级中，我的showAlert道具反映了父级状态，执行以下功能：

    const closeAlert = () => {
        const closeModal = () => this.setState({
            showAlert: false,
        })
        setTimeout(closeModal, 1000)
    }
    this.setState(
        {
            showAlert: true,
        },
        () => closeAlert()
    )

因此，如果我必须将此代码放在每个父级中，并让他们跟踪警报的状态，则这将变得多余。有没有一种更有效的方法来用更少的代码来做到这一点？理想情况下，我想将与计时器有关的状态移到实际的警报组件本身中。

Answer 1

定义要在子组件中使用的回调（useCallback道具）功能。

检查this example：

class App extends React.Component {
  render() {
    return (
      <Flexbox>
        <PromptComponent
          useCallback={callback => {
            setTimeout(() => {
              callback();
            }, 1000);
          }}
        >
          Hello
        </PromptComponent>
      </Flexbox>
    );
  }
}

将show状态移至您的子组件并使用回调：

export default class PromptComponent extends React.Component {
  state = {
    show: true
  };

  componentDidMount() {
    this.props.showAlert(() => this.setState({ show: false }));
  }

  render() {
    return (
      <div>
        {this.state.show && (
          <div id="alert-prompt">
            <span>{this.props.children}</span>
          </div>
        )}
      </div>
    );
  }
}

通过这种方式，您可以将状态与父组件分离，而且回调是通用的，因此将来，您可以将其更改为setInterval或其他任何东西。

用计时器重新加载孩子

1 个答案: