web-dev-qa-db-fra.com

Comment faire passer un composant de réaction dans un autre composant de réaction pour transclude le contenu du premier composant?

Y at-il un moyen de passer un composant dans un autre composant de réaction? Je souhaite créer un composant de modèle de réaction et transmettre un autre composant de réaction afin de comprendre ce contenu.

Edit: Voici un codepen de reactJS illustrant ce que je tente de faire. 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'));
javascriptreactjs
174
Andrew Allbright

Vous pouvez utiliser this.props.children pour rendre tous les enfants que contient le composant:

const Wrap = props => <div>{props.children}</div>

export default () => <Wrap><h1>Hello Word</h1></Wrap>
168
David Hellsing

Notez que j'ai fourni une réponse plus détaillée ici

Enveloppe d'exécution:

C'est la manière la plus idiomatique.

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

Notez que children est un "accessoire spécial" dans React, et l'exemple ci-dessus est un sucre syntaxique et est (presque) équivalent à <Wrapper children={<App/>}/>

Initialisation wrapper/HOC

Vous pouvez utiliser un composant d'ordre supérieur (HOC). Ils ont été ajoutés à la document officiel récemment.

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

Cela peut conduire à des performances (légèrement) meilleures, car le composant wrapper peut court-circuiter le rendu d'un pas en avant avec shouldComponentUpdate, alors que dans le cas d'un wrapper d'exécution, l'accessoire enfant est susceptible de toujours être un ReactElement différent et de provoquer un nouveau rendu. même si vos composants étendent PureComponent.

Notez que connect de Redux était un wrapper d’exécution, mais il a été remplacé par un HOC car il permet d’éviter les rediffusions inutiles si vous utilisez l’option pure (ce qui est vrai par défaut).

Vous ne devez jamais appeler un HOC pendant la phase de rendu car la création de composants React peut être coûteuse. Vous devriez plutôt appeler ces wrappers lors de l'initialisation.

Notez que lorsque vous utilisez des composants fonctionnels comme ci-dessus, la version HOC ne fournit aucune optimisation utile car les composants fonctionnels sans état n'implémentent pas shouldComponentUpdate.

Plus d'explications ici: https://stackoverflow.com/a/31564812/82609

107
Sebastien Lorber
const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />
24
Joseph Barnes

Facebook recommande l'utilisation de composants sans état. Source: https://facebook.github.io/react/docs/reusable-components.html

Dans un monde idéal, la plupart de vos composants seraient des fonctions sans état, car à l'avenir, nous pourrons également optimiser les performances de ces composants en évitant les vérifications inutiles et les allocations de mémoire. C'est le modèle recommandé, lorsque cela est possible.

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);
12
Sud

je préfère utiliser l'API intégrée React:

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

alors vous pouvez remplacer le wrapper div par ce que vous voulez:

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test>
9
Fareed Alnamrouti

Vous pouvez le passer comme un accessoire normal: foo={<ComponentOne />}

Par exemple:

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>
5
Fellow Stranger

Vous pouvez passer un composant via. les accessoires et le rendre avec interpolation.

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

Vous passeriez alors dans un prop appelé child, qui serait un composant React.

5
returneax

Tard dans la partie, mais voici un puissant modèle HOC permettant de remplacer un composant en le fournissant comme accessoire. C'est simple et élégant.

Supposons que MyComponent restitue un composant _ fictif A mais que vous souhaitiez autoriser un remplacement personnalisé de A, dans cet exemple B, qui enveloppe A dans un <div>...</div> et ajoute également "!" au texte prop:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);
3
joneit

En fait, votre question est de savoir comment écrire un composant d'ordre supérieur (HOC). L'objectif principal de l'utilisation de HOC est d'empêcher le copier-coller. Vous pouvez écrire votre HOC en tant que composant purement fonctionnel ou en tant que classe. Voici un exemple:

    class Child extends Component {
    render() {
        return (
            <div>
                Child
            </div>
        );
    }
}

Si vous souhaitez écrire votre composant parent en tant que composant basé sur une classe:

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

Si vous voulez écrire votre parent en tant que composant fonctionnel:

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}
2
meisam nazari

Voici un exemple d'un composant parent Liste et dont les accessoires contiennent un élément react. Dans ce cas, un seul composant Link est transmis (comme indiqué dans le rendu dom).

class Link extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
     );
  }
}
class List extends React.Component {
  render(){
   return(
    <div>
       {this.props.element}
       {this.props.element}
    </div>
   );
  }
}

ReactDOM.render(
  <List element = {<Link name = "working"/>}/>,
  document.getElementById('root')
);
0
cheesey