Question

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

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

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

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

codepen here

无论如何都可以解决这个问题？ 这些与父组件对话的方法是否可以存在于组件本身内部？

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

模态：

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的模态道具。当这是已知的道具变化时，您可以设置其隐藏或显示状态的动画。您还可以提供onShown和onHidden回调，如果您需要在父级别进行更多控制，则可以在动画完成后触发。

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

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

1 个答案: