React.js: en Passant imbriquée accessoires à Réagir.createElement

J'ai un code de la forme

props = { user: {userattr1: 1, userattr2: 2}};
var element = React.createElement(MyReactClass, props);

c'est à dire, où les accessoires est un objet imbriqué. Lorsque j'essaie de compiler le code ci-dessus, j'obtiens l'erreur:

Avertissement: Toute utilisation d'un détrompeur objet doit être enveloppé dans de Réagir.addons.createFragment(objet) avant d'être transmis comme un enfant.

J'ai été à la recherche en ligne et il semble que les objets imbriqués sont parfaitement admissible que les accessoires. Comment puis-je résoudre mon erreur?

Edit: MyReactClass ressemble à quelque chose comme ceci:

var MyReactClass = React.createClass({
  render: function () {
    <div>{this.props.user}</div>
  }
})
  • Vous n'obtenez pas une erreur mais un avertissement
  • Pouvez-vous reproduire ce dans un jsfiddle. Je pense que votre problème est ailleurs, pas les accessoires. Comment est MyReactClass défini?
InformationsquelleAutor Allen | 2015-05-25
  1. 5

    Je ne pense pas que le problème que vous rencontrez est lié à un objet imbriqué que les accessoires. Ici c'est un exemple:

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

var props = { user: {name: "World"}};
React.render(React.createElement(Hello, props), document.getElementById('container'));

    https://jsfiddle.net/urjmndzk

    Plus probablement, votre problème est lié à la façon dont vous définissez les clés de la enfants de composants. Cependant, il est difficile de dire sans voir l'ensemble du code.

    C'est un lien vers le creeateFragment fonction, il peut vous aider. https://facebook.github.io/react/docs/create-fragment.html

    • Il s'avère que le problème est dans le fait que j'ai essayé d'utiliser un objet dans le balisage HTML, sous l'hypothèse que Réagir serait d'utiliser sa représentation JSON.
    InformationsquelleAutor Giuseppe Pes
  2. 0

    Si vous utilisez JSX, vous pouvez également passer un objet imbriqué comme un accessoire par la construction de l'objet comme ceci:

    <HelloWorldClass user={{name:'Kyle'}} />

    Exemple de syntaxe dans la Pile des Snipets

    JS:

    //function component syntax
function HelloWorldFunc(props) {
  return (
    <div>Hello, {props.user.name} </div>
  );
}
//class component syntax
class HelloWorldClass extends React.Component {
  render() {
    return (
      <div >
        Hello, {this.props.user.name}
      </div>
    );
  }
}

//createElement syntax
const helloCreate = React.createElement(HelloWorldFunc, {user:{name:'Kyle'}});
//JSX syntax
const helloJSX = <HelloWorldClass user={{name:'Kyle'}} />

ReactDOM.render(
  <div>
    {helloCreate}
    {helloJSX}
  </div>
,document.querySelector("#root"));

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

    InformationsquelleAutor KyleMit