反应组件元素上的动态属性

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

我不确定这是最好的主意，但是由于我不了解您的完整要求，因此我们开始吧。 为此，您可以尝试在<input/>元素中使用{...data}代替{data} 。 但是，自定义属性具有某些保留。 请参阅React文档的本节以获取更多信息。 另外， 这里还有有关三个点（...）的更多信息。

Answer 2

对我来说，带有data道具的自定义input组件看起来很奇怪和混乱。

如果仅查看Babel将<input foo={bar} />编译为什么内容，就可以动态地动态构建元素。 给定数据数组，您所需要做的就是

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