Dynamische Attribute auf einem Element Element react

Question

Ich versuche, eine dynamische App wie möglich zu erstellen. Also dachte ich mir, warum sollte man keine Elemente bauen, indem man nur ein JSON-Objekt an sie weitergibt.

Ich habe dies:

[ 
    { 
     key: 1, 
     element: 'input', 
     type: 'text', 
     placeholder: 'Jamie is' 
    }, 
    { 
     key: 2, 
     element: 'input', 
     type: 'text', 
     placeholder: 'Jamie is Not' 
    }, 
    { 
     key: 3, 
     element: 'input', 
     type: 'password', 
     placeholder: 'Jamie is' 
    } 
] 

Jedes Element aus dem Array wird auf meine Elemente übergeben bekommen, so dass anstelle jedes Attribut zu definieren, der mit Ich mag würde nur sicherstellen, dass ich die richtigen Attribute übergeben und habe es baut auf der Grippe auf.

Bricht die Hölle los, wenn ich dies tun:

const input = React.createClass ({ 
    render() { 
     let data = this.props.data; 
     return (
      <input placeholder={data.placeholder} /> //current 
      <input {data} /> //desired 
     ); 
    } 
}); 

Answer 1

Ich bin nicht sicher, dass die beste Idee, aber zu sein, dass ich von Ihren vollständigen Anforderungen nicht bewusst bin, hier gehen wir. Um dies zu erreichen, könnten Sie versuchen, {...data} anstelle von {data} im <input/> Element zu tun. Benutzerdefinierte Attribute haben jedoch bestimmte Einschränkungen. Weitere Informationen finden Sie in der React-Dokumentation unter this section. Auch here gibt einige Informationen darüber, wofür die drei Punkte (...) stehen.

Answer 2

Die benutzerdefinierte input Komponente mit der data Requisite scheint komisch und chaotisch zu mir.

Es ist ziemlich einfach, Elemente dynamisch zu erstellen, wenn Sie nur schauen, was Babel kompiliert <input foo={bar} /> zu. Angesichts Ihrer Reihe von Daten alles, was Sie tun müssen, ist

var inputs = data.map(
    ({element, ...props}) => React.createElement(element, props) 
);