React: Ist es möglich, ein "Platzhalter-Template-Tag" als Kind zu ersetzen?

Question

ich zum Beispiel habe diesen Code unten:

<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> 

Und ich möchte, zum Beispiel in der Lage sein in der AjaxForm Komponente durch diese den Tag Platzhalter 'submit_button' zu ersetzen:

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

Ist gibt es eine Möglichkeit, dies zu tun, indem Sie this.props.children in der AjaxForm-Komponente durchlaufen?

Ist es möglich, ein Textmuster zu finden, indem alle Kinder gecrawlt werden?

Muss ich Refs oder einen Schlüssel verwenden?

Vielen Dank im Voraus!

---- EDIT

einige Informationen hinzuzufügen, ist dies die von der AjaxForm Komponente machen

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

Ich glaube, ich jetzt das Problem zu verstehen. Du bist Generieren eine Komponente innerhalb AjaxForm und Sie möchten diese Komponente dynamisch platzieren können. In diesem Fall sollten Sie eine andere Komponente mit dem Namen AjaxFormContents (oder wie auch immer Ihre spezifische Form aufgerufen werden sollte) erstellen, die Ihre generierte Komponente über Requisiten empfängt und sie dort platziert, wo Sie möchten.

Nun hat jede Komponente, die Sie als Kind verwenden, Zugriff auf diese Komponente.

// AjaxFormContents.js 

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

Dann in Ihrer Stammkomponente:

// Parent.js 

... 
render() { 
    return (
    <AjaxForm> 
     <AjaxFormContents /> 
    </AjaxForm> 
) 
} 

Dies sollte funktionieren, aber ein anderer Ansatz - eine höhere Ordnung Komponente (HOC) wäre auch eine schöne Lösung hier, weil Ihr AjaxForm doesn Wenn Sie nichts anzeigen, wird nur der Formularinhalt umbrochen. Stattdessen kann AjaxForm ein HOC sein, der eine generierte Übergabeschaltfläche an die umschlossene Komponente übergibt.

var ajaxForm = function (WrappedComponent) { 
    return React.createClass({ 
    generateSubmitButton() { 
     return <a>your special submit button </a> 
    }, 

    render() { 
     <WrappedComponent submitButton={ this.generateSubmitButton() } /> 
    } 
    }) 
} 

Dann können Sie die exakt gleiche AjaxFormContents Komponente haben, wie oben, und wenn Sie es exportieren:

// or module.exports, whichever one you're using. 
export default ajaxForm(AjaxFormContents)