zurb-foundation - 如何让react.js 与 zurb Reveal 模态形式很好地配合

Question

我正在尝试将 zurb Reveal 与 Form 集成到 React 组件中。到目前为止，下一个代码正确显示模式形式:

ModalForm = React.createClass({
  handleSubmit: function(attrs) {
    this.props.onSubmit(attrs);
    return false;
  },

  render: function(){
    return(
      <div>
        <a href="#" data-reveal-id="formModal" className="button">Add new</a>
        <div id="formModal" className="reveal-modal" data-reveal>
          <h4>Add something new</h4>
          <Form onSubmit={this.handleSubmit} />
          <a className="close-reveal-modal">&#215;</a>
        </div>
      </div>
    );
  }
});

Form 组件非常标准:

Form = React.createClass({
  handleSubmit: function() {
    var body = this.refs.body.getDOMNode().value.trim();
    if (!body) {
      return false;
    }
    this.props.onSubmit({body: body});
    this.refs.body.getDOMNode().value = '';
    return false;
  },
  render: function(){
    return(
      <form onSubmit={this.handleSubmit}>
        <textarea name="body" placeholder="Say something..." ref="body" />
        <input type="submit" value="Send" className="button" />
      </form>
    );
  }
}); 

问题:当我在模态表单组件中渲染表单组件并在表单输入中输入某些内容时，我会在控制台异常中看到未捕获的对象。这是一个堆栈:

Uncaught object
  invariant
  ReactMount.findComponentRoot
  ReactMount.findReactNodeByID
  getNode
  ...

如果我只是直接在父组件中渲染表单组件，那么一切都会正常。有人可以帮忙吗？

Answer 1

简而言之，你做错了，这不是 React 中的错误。

如果你使用任何类型的插件来修改 React 组件的 dom 节点，那么它就会以某种方式破坏事物。

您应该做的是使用 React 本身和补充 css，以您希望的模式对话框方式定位组件。

我建议创建一个组件，使用react的statics组件属性来定义几个包装renderComponent的函数，为您提供一个干净的函数调用来显示或隐藏 react 对话框。这是我过去使用过的一个简化示例。注意:它确实使用 jQuery，但如果您不需要 jQuery 代码，您可以将 jQ 替换为标准 js api 调用，例如 elementById 等。

window.MyDialog = React.createClass({
    propTypes: {
        title:      React.PropTypes.string.isRequired,
        content:    React.PropTypes.string.isRequired
    },
    statics: {

        // open a dialog with props object as props
        open: function(props) {
            var $anchor = $('#dialog-anchor');
            if (!$anchor.length) {
                $anchor = $('<div></div>')
                    .prop('id', 'dialog-anchor');
                    .appendTo('body');
            }
            return React.renderComponent(
                MyDialog(props),
                $anchor.get(0)
            );
        },

        // close a dialog
        close: function() {
            React.unmountComponentAtNode($('#dialog-anchor').get(0));
        }
    },

    // when dialog opens, add a keyup event handler to body
    componentDidMount: function() {
        $('body').on('keyup.myDialog', this.globalKeyupHandler);
    },

    // when dialog closes, clean up the bound keyup event handler on body 
    componentWillUnmount: function() {
        $('body').off('keyup.myDialog');
    },

    // handles keyup events on body
    globalKeyupHandler: function(e) {
        if (e.keyCode == 27) { // ESC key

            // close the dialog
            this.statics.close();
        }
    },

    // Extremely basic dialog dom layout - use your own
    render: function() {
        <div className="dialog">
            <div className="title-bar">
                <div className="title">{this.props.title}</div>
                    <a href="#" className="close" onClick={this.closeHandler}>
                </div>
            </div>
            <div className="content">
                {this.props.content}
            </div>
        </div>
    }
});

然后您可以通过调用打开一个对话框:

MyDialog.open({title: '对话框标题', content: '我的对话框内容'});

然后关闭它

MyDialog.close()

对话框始终附加到直接位于 body 下且 id 为“dialog-anchor”的新 dom 节点。如果您在对话框已经打开时打开一个对话框，它只会根据新的 props 更新 dom(如果它们相同，则不会更新)。

当然，将对话框的内容作为 props 参数传递并不是特别有用。我通常会在下面扩展以解析 markdown -> html 来获取内容，或者在提供 url 作为 prop 时通过组件内的 ajax 请求获取一些 html。

我知道上面的代码并不完全是你想要的，但我不认为有一个好的方法可以让 dom 修改插件与 React 一起工作。你永远不能假设 React 组件的 dom 表示是静态的，因此它不能被第 3 方插件成功操作。老实说，我认为如果你想以这种方式使用 React，你应该重新评估你使用该框架的原因。

也就是说，我认为上面的代码是一个对话框的一个很好的起点，其中所有操作都发生在组件内部，这毕竟是reactjs的全部内容!

注意:代码是从内存中快速编写出来的，并且没有以当前的形式进行实际测试，如果有一些小的语法错误或其他错误，我们深表歉意。