Réagir: Est-ce possible de remplacer un "balise de balise d'espace réservé" envoyé en tant qu'enfant?

Question

je par exemple le code ci-dessous:

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

Et je voudrais, par exemple, être en mesure dans le composant AjaxForm pour remplacer l'espace réservé balise « submit_button » par ceci:

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

Est y at-il un moyen de faire cela en itérant sur this.props.children dans le composant AjaxForm? Est-il possible de trouver du texte en rampant tous les enfants?

Dois-je utiliser des refs ou une clé?

Merci d'avance!

---- EDIT

Pour ajouter des informations, c'est le rendu de la composante 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

Je pense que je comprends votre question maintenant. Vous êtes générer un composant à l'intérieur AjaxForm et vous souhaitez pouvoir placer ce composant dynamiquement. Dans ce cas, vous devez créer un autre composant appelé AjaxFormContents (ou quel que soit votre formulaire spécifique) qui reçoit votre composant généré via les accessoires et le place où vous voulez.

// AjaxForm.js 

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

Maintenant, n'importe quel composant que vous avez mis en tant qu'enfant aura accès à ce composant.

// AjaxFormContents.js 

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

Ensuite, dans votre composant parent:

// Parent.js 

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

Cela devrait fonctionner, mais une autre approche - en utilisant un composant d'ordre supérieur (HOC) serait une bonne solution ici aussi, parce que vos AjaxForm doesn N'affiche rien, il enveloppe simplement le contenu de votre formulaire. A la place, AjaxForm peut être un HOC qui transmet un composant de bouton d'envoi généré au composant enveloppé.

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

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

Ensuite, vous pouvez avoir exactement le même composant AjaxFormContents comme ci-dessus et quand vous exportez:

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