在React中使用loop / non ES6是一个坏主意吗

Question

我有两个都是数组的道具。 prop1 = json对象数组 prop2 =组件数组（因为它们是svg格式的图标）。

我想做的是迭代prop1并在我进行操作时在props2中插入图标​​。 由于javascript中的map函数仅需要一个数组对象。使用传统的for循环是个坏主意，例如for（i = 0;我

const input = [
  { value: 'One', label: 'One', default: true },
  { value: 'Two', label: 'Two' }
]

const icons = [<Icon1/>, <Icon2>]

我想做的就是根据数组中的内容插入这些图标。

Answer 1

有很多方法可以实现您的要求，例如：

const generateButtons = (buttonsProps, iconArray) =>
  buttonsProps.map((buttonProp, i) => {
    const { value, label, ...restProps } = buttonProp;
    return (
      <div>
        {iconArray[i]}
        <button value={value} defaultChecked={restProps.default}>
          label = {label}
        </button>
      </div>
    );
  });

function RenderButtons() {
  return <div className="App">{generateButtons(buttonsProps, iconArray)}</div>;
}

Answer 2

虽然可以具有组件数组，但是最好让您的状态处理逻辑/数组，然后仅重用相同的组件并动态呈现每个输入。

const Icon = ({label}) => <h1>{label}</h1>;

const Icons = ({inputs}) => inputs.map(input => <Icon label={input.label} />) 

class App extends React.Component {
  state = {
    inputs :  [
      { value: 'One', label: 'One', default: true },
      { value: 'Two', label: 'Two' }
    ]
  }

  render() {
    return (
      <div>
        {<Icons inputs={this.state.inputs}/>}    
      </div>
    );
  }
}