Réagir : Composants enfants sans JSX

Question

Je veux créer React et d'y ajouter des composants enfants sans avoir recours à l'option JSX . J'ai essayé ce qui suit :

class ChildComponent extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("p", {}, "hello world");
  }
}

class Component  extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("div", {}, ChildComponent);
  }
}

J'ai également essayé ceci

const childComponent = createReactClass({
  render: function() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("p", {}, "hello world");
  }
});

const component = createReactClass({
  render: function() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("div", {}, childComponent);
  }
});

Et j'obtiens cette erreur :

Avertissement : Les fonctions ne sont pas valides en tant qu'enfant React. Cela peut se produire si vous renvoyez un composant au lieu d'un rendu. Ou bien peut-être vouliez-vous appeler cette fonction au lieu de la retourner.

Answer 1

Tout ce que vous devez faire pour créer un élément est de passer le troisième paramètre comme étant l'élément React au lieu d'un argument normal. Utilisez React.createElement pour créer un élément à partir de la classe react ChildComonent.

class ChildComponent extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("p", {}, "hello world");
  }
}

class Component extends React.Component {
  render() {
    const template = Object.assign({}, this.state, this.props);
    return React.createElement("div", {}, React.createElement(ChildComponent));
  }
}

Codes de travail et boîte à outils