Question

我有以下代码：

<AjaxForm>

    <input type="hidden" name="xxx" value="xxx" />

    <div className="grid">
        <div className="gdcol-xs-11">

            [[SUBMIT_BUTTON]]

        </div>
        <div className="gdcol-xs-11">

            [[CANCEL_BUTTON]]

        </div>
    </div>  

</AjaxForm>

我希望，例如，我可以在AjaxForm组件中替换标记占位符＆＃39; SUBMIT_BUTTON＆＃39;通过这个：

<a href="javascript:void(0);" onClick={this.handleSubmit}>VALIDATE</a>

有没有办法通过迭代AjaxForm组件中的this.props.children来做到这一点？

通过爬行所有孩子可以找到一些文本模式吗？

我是否必须使用refs或密钥？

提前谢谢！

----编辑

要添加一些信息，这是AjaxForm组件的渲染

return (
        <form action="" method="post" ref={this.ajaxRef} id={this.props.id} onSubmit={this.onSubmit}>

            <input type="hidden" name="form_id" value={this.props.id} />

            {this.props.children}

            <input type="submit" value="" className="fake-submit" />

            <div id={("ajax-") + this.props.id + ("-messages-container")} className="ajax-form-messages"></div>

        </form>
    )

Answer 1

我想我现在明白你的问题。您在<{1}}内生成组件，并希望能够动态放置该组件。在这种情况下，您应该创建另一个名为AjaxForm的组件（或任何您应该调用的特定表单），它通过道具接收您生成的组件并将其放置在您想要的任何位置。

AjaxFormContents

现在，您作为孩子放置的任何组件都可以访问此组件。

// AjaxForm.js

...
render() {
  return React.cloneElement(this.props.children, { 
    submitButton: this.generateSubmitButton() // or however you're doing it
  })
}
...

然后在您的父组件中：

// AjaxFormContents.js

...
render() {
  return ( // arrange your form contents however you like!
    <div>
      <input />
      { this.props.submitButton }
    </div>
  )
}

这应该有效，但另一种方法 - 使用更高阶的组件（HOC）也是一个很好的解决方案，因为你的// Parent.js ... render() { return ( <AjaxForm> <AjaxFormContents /> </AjaxForm> ) }没有显示任何内容，它只是包装你的表单内容..而AjaxForm可以是一个HOC，它将生成的提交按钮组件传递给包装组件。

AjaxForm

然后，您可以拥有与上面完全相同的var ajaxForm = function (WrappedComponent) { return React.createClass({ generateSubmitButton() { return <a>your special submit button </a> }, render() { <WrappedComponent submitButton={ this.generateSubmitButton() } /> } }) }组件以及导出时：

AjaxFormContents

React：这是否可以替换＆＃34;占位符模板标记＆＃34;作为孩子发送？

1 个答案: