React 组件自身状态（UI 状态）

Question

我正在使用 React-toolbox 对话框，我想将其包装为一个简单的确认对话框，它的工作方式类似于 alert() 显示带有消息和关闭按钮的对话框。

所以我有这样的演示组件

const ConfirmationDialog =({active, size, title,  message}) => {

  const onClickConfirm = ()=> {
    active = false;
  }

  return (
      <Dialog
        active={active}
        title={title}
        type={size}
      >
        <p>{message}</p>
          <button onClick={onClickConfirm}>Close</button>
      </Dialog>
  );
}

export default ConfirmationDialog;

active 来自一个道具，所以当我需要它时会显示确认对话框，但是我希望关闭按钮只是自行关闭对话框。

我真的必须传递handleOnClose 函数吗？每次我想使用这个组件时都必须传递那个函数似乎太多余了。 还是我真的必须创建一个容器类来实现这么简单的操作？

Answer 1

您可以将您的ConfirmationDialog 组件作为类并使用本地状态来存储active 变量：

import React, { Component, PropTypes } from 'react';

class ConfirmationDialog extends Component {
  constructor(props) {
    super(props);

    // Setting `active` state property from props.
    this.state = {
      active: props.active,
    };

    // As we are passing this function as event handler, we need bind context,
    // to get access to `this` inside this function.
    this.handleCloseClick = this.handleCloseClick.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    // When we will provide `active` variable via props, we will automatically set it to state.
    if (nextProps.active !== this.props.active) {
      this.setState({
        active: nextProps.active,
      });
    }
  }

  handleCloseClick() {
    // On clicking `close` button, setting `active` state variable to `false`,
    // it forces component to rerender with new state.
    this.setState({
      active: false,
    });
  }

  render() {
    const { title, size, message } = this.props;
    // Getting `active` variable from state, instead of props.
    const { active } = this.state;
    return (
      <Dialog
        active={active}
        title={title}
        type={size}
      >
        <p>{message}</p>
        <button onClick={this.handleCloseClick}>Close</button>
      </Dialog>
    );
  }
};

Answer 2

您正在直接修改代码中的道具。我想知道这段代码是否有效。因为它不应该。

您需要将active thingy 存储在组件状态的某处，要么是这个，要么（很可能）在上层组件中。

而且看起来很简单，但使用 React 确实不是那么那么容易。查看this tutorial，这里我将解释如何使用模态弹出窗口执行things like that。