Come passare un componente di reazione a un altro componente di reazione per escludere il contenuto del primo componente?


217

C'è un modo per passare un componente in un altro componente di reazione? Voglio creare un componente di reazione modello e passare un altro componente di reazione al fine di escludere tale contenuto.

Modifica: ecco un codice di reazione che illustra cosa sto cercando di fare. http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

ReactJS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

Risposte:


198

È possibile utilizzare this.props.childrenper eseguire il rendering di qualsiasi elemento secondario contenuto nel componente:

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

4
Vorrei usare questa risposta. this.props.childrenfa parte dell'API del componente e dovrebbe essere utilizzata in questo modo. Gli esempi del team React usano questa tecnica, come nel trasferimento di oggetti di scena e quando si parla di un singolo figlio .
Ross Allen,

Dal mio commento qui sotto: Passandolo come prop puoi anche dargli un nome e usare propTypes per digitare check.
returneax,

1
@AndrewAllbright: il tuo esempio non è stato passare alcun bambino. Questo funziona: codepen.io/ssorallen/pen/Dyjmk
Ross Allen

E nel caso in cui poi si desidera ottenere il DOM Nodi dei bambini: stackoverflow.com/questions/29568721/...
ericsoco
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.