修改父状态的可重用 React 组件

Question

只是想了解制作与父组件状态交互的可重用反应组件的最佳方法。

---

编辑：我遵循了Peter 的有用建议并使其更加模块化，但我仍然在从子组件更新父组件状态时遇到问题。我别无选择传递一个方法，然后必须在所有使用<Modal /> 组件的地方重复此方法？
这是不可避免的吗？
Updated codepen here

---

我有一个需要写入其父状态的反应组件。
以<Modal /> 为例，如果显示了模态框，则其父组件将其状态更新为modal1 : ‘is-visible'。 is-visible 作为类添加到模态框。

我遇到的问题是我有 3 个函数/方法来更新状态并为模式设置动画，我需要将这些函数/方法复制到每个使用 <Modal /> 组件的组件。

codepen here

有没有办法解决这个问题？ 这些与父组件对话的方法可以存在于组件本身内吗？

这样我就可以将模态组件放在 viola 中，它可以在我的应用程序周围没有重复的函数方法的情况下工作。

模态：

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.closeModal = this.closeModal.bind(this);

    this.state = {
      extraClasses: ''
    }
  }

  componentWillReceiveProps(props) {
    this.setState({ extraClasses: props.extraClasses });
  }

  closeModal() {
    this.props.closeModal();
  }

  render() {
    return (
      <div className={'c-modal ' + this.props.extraClasses}>
        <div className="c-modal__bg" onClick={this.closeModal}></div>
        <div className="c-modal__inner">
          <button className="c-modal__close-modal" onClick={this.closeModal}>X</button>
          {this.props.children}
        </div>
      </div>
    );
  }
}

<ParentComponent />这里，注意3个函数/方法：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.animateModal = this.animateModal.bind(this);

    this.state = {
      // modal1: '',
      // modal2: ''
    };
  }

  animateModal(type, stateProp) {
    if (type == 'show') {
      this.setState({ [stateProp]: 'c-modal--display-block' })
      setTimeout(() => {
        this.setState({ [stateProp]: 'is-visible' })
      }, 0);
    } else if (type == 'hide') {
      this.setState({ [stateProp]: 'c-modal--display-block' })
      setTimeout(() => {
        this.setState({ [stateProp]: '' })
      }, 300);
    }
  }

  showModal(modalNum) {
    this.animateModal('show', 'modal' + modalNum)
  }

  closeModal(modalNum) {
    this.animateModal('hide', 'modal' + modalNum)
  }

   render() {
    return (
      <div>
        <h2>Start editing to see some magic happen ✨</h2>

         <button className="c-btn" onClick={() => this.showModal(1)}>show modal</button>
        <Modal extraClasses={'extraClassesHere ' + this.state.modal1} closeModal={() => this.closeModal('1')}>
          <h1>I'm a modal</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus fugit dicta quisquam est nihil vel, suscipit sit veritatis eum accusantium voluptas temporibus ut et, distinctio, illum assumenda sint libero voluptate.</p>
        </Modal>

      </div>
    )
  }
};

非常感谢任何帮助！

Answer 1

如果您将动画显示和关闭方法移动到模态组件本身，您可以只拥有一个名为 isShown 的模态道具。当那个 isShown 道具改变时，你可以动画到它的隐藏或显示状态。如果您需要在父级进行更多控制，您还可以提供 onShown 和 onHidden 回调，这些回调可以在动画完成后触发。

如果我理解不正确，请告诉我！