如何在 React 中动态分配属性？

IT技术 javascript reactjs
2021-05-15 08:22:54

这是一个有两个参数的函数：

  1. 我要创建的标签的名称
  2. 具有属性的对象

使用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'
})
1个回答

您正在重新实现现有React.createElement方法。

您可以将组件的唯一props存储在一个数组中，然后使用这些props创建一个组件列表。

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);
  }
});
其它你可能感兴趣的问题
上一篇全金属打印头的灵敏度如何？ 下一篇在 react-router-dom 中重定向？