Tengo el código de la forma

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

es decir, donde el atrezzo es un objeto anidado. Cuando intento compilar el código de arriba me sale el error:

Advertencia: el uso de una llave objeto debe ser envuelto en Reaccionar.los complementos.createFragment(objeto) antes de ser pasado como un niño.

He estado buscando en internet y parece que los objetos anidados son perfectamente admisibles como accesorios. ¿Cómo puedo resolver mi error?

Edición: MyReactClass se ve algo como esto:

var MyReactClass = React.createClass({
  render: function () {
    <div>{this.props.user}</div>
  }
})
  • Usted no recibe un error sino una advertencia
  • Se puede reproducir este en un jsfiddle. Yo creo que tu problema está en otro lugar, no de los apoyos. ¿Cómo se MyReactClass definido?
InformationsquelleAutor Allen | 2015-05-25

2 Comentarios

  1. 5

    No creo que el problema, es el relacionado con un objeto anidado como accesorios. Aquí está un ejemplo:

    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

    Más probable es que su problema está relacionado con la manera de establecer las claves de los niños de los componentes. Sin embargo, es difícil decir sin ver el código completo.

    Este es un enlace a la creeateFragment función, puede ayudarte. https://facebook.github.io/react/docs/create-fragment.html

    • Resulta que el problema estaba en el hecho de que yo estaba tratando de usar un objeto en el lenguaje de marcado HTML, bajo el supuesto de que Reaccionan hará uso de su representación en JSON.
  2. 0

    Si usted está usando JSX, también puede pasar un objeto anidado como una proposición mediante la construcción del objeto como este:

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

    Ejemplo de sintaxis en la Pila de 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>

Dejar respuesta

Please enter your comment!
Please enter your name here