这是一个具有两个参数的函数:
使用React,我创建一个组件并将该元素呈现为DOM。问题是我想向元素添加属性,但不允许循环在元素内设置属性。
var Element = function(element, properties) {
var newElement = React.createClass({
render: function() {
return (
React.createElement(element, {}, 'react reuseable')
);
}
});
ReactDOM.render(React.createElement(newElement, null), document.getElementById('content'));
}
这是创建React元素的函数调用:
Element('g', {
id: 'DrawingController.drawingPathCounter ' + '_shape',
d: 'path',
fill: 'none',
stroke: 'Controllers.TemplateController.wireFrameColour_Selected',
'stroke-width': 1,
'class': 'drawingpath',
pathhover: '',
'vector-effect': 'non-scaling-stroke'
})
您正在重新实现现有React.createElement
方法。
您可以将组件的唯一道具存储在数组中,然后使用这些道具创建组件列表。
var propsList = [
{ id: 1, d: 'path', fill: 'none' },
{ id: 2, d: 'path', fill: 'none' },
{ id: 3, d: 'path', fill: 'none' }
];
var components = propsList.map(function(props) {
return React.createElement('g', props);
});
var App = React.createClass({
render: function() {
return React.createElement('div', null, components);
}
});
ReactDOM.render(
React.createElement(App, null),
document.getElementById('content')
);
如果希望属性列表是动态的,则应将其存储在组件的状态内。
var App = React.createClass({
getInitialState: function() {
return {
propsList: []
};
},
addProps: function(props) {
var propsList = this.state.propsList.concat([props]);
this.setState({ propsList: propsList });
},
render: function() {
var components = this.state.propsList.map(function(props) {
return React.createElement('g', props);
});
return React.createElement('div', null, components);
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句