Динамические атрибуты для элемента реагирующего компонента

Question

Я пытаюсь создать динамическое, насколько возможно приложение. Поэтому я подумал, почему бы не построить элементы, просто передав ему json-объект.

У меня есть это:

[ 
    { 
     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' 
    } 
] 

Каждый элемент из массива будет получить передается моим элементам, таким образом, вместо того, чтобы определить каждый атрибут Я хотел бы, чтобы просто убедиться, что я передаю правильные атрибуты и иметь он опирается на грипп.

Все переносы ад потерять, когда я делаю это:

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

Answer 1

Я не уверен, что это самая лучшая идея, но в том, что я не в курсе ваших полных требований, здесь мы идем. Чтобы сделать эту работу, вы можете попробовать сделать {...data} вместо {data} в элементе <input/>. Однако пользовательские атрибуты имеют определенные оговорки. Для получения дополнительной информации обратитесь к this section документации React. Также here - это дополнительная информация о том, для чего предназначены три точки (...).

Answer 2

Компонент input с окном data кажется странным и грязным для меня.

Это довольно легко построить элементы динамически, если вы просто посмотрите, что Babel компилирует <input foo={bar} />. Учитывая ваш массив данных, все, что вам нужно сделать, это

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