javascript - 通过数组映射并在React中渲染指定组件

Question

我有 2 个几乎相同的组件，它们通过一系列选项映射并生成复选框或单选按钮。组件之间的唯一区别是呈现的子组件(复选框或单选输入)。

我想减少这些组件中的重复代码，但我不确定解决它的最佳方法。我可以将这两个组件合并为一个组件，例如 FormControlGroup 并添加更多 Prop 以允许我选择是否要呈现复选框或单选按钮，例如checkboxOrRadio，但这意味着如果我添加复选框或单选按钮的新变体，例如 CustomCheckbox，我将不得不继续扩展该组件的属性。

<FormControlGroup
  label="Radio buttons"
  name="test"
  options=[{label: 'one', value: 1}, {label: 'two', value: 2}, {label: 'three', value: 3}]
  checkboxOrRadio="radio"
/>

是否可以(并且明智地)将一个组件作为 prop 传入并在 map 函数中渲染该组件？ 如果是这样，我该怎么做？或者有没有更优雅的解决方案？ 这样我就可以传入任何我想要的组件，它会被渲染并传递 key, name, label, onChange, value, checked Prop

复选框组.js

import React from 'react';
import CheckboxInput from './CheckboxInput';

const CheckboxGroup = ({ label, name, options, onChange, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>

      {children}

      <div className="form-inline__field-container">
        {options &&
          options.map(option => (
            <CheckboxInput
              key={option.value}
              name={name}
              label={option.label}
              onChange={onChange}
              value={option.value}
              checked={option.value}
            />
          ))
        }
      </div>
    </div>
  );
};

export default CheckboxGroup;

RadioGroup.js

import React from 'react';
import RadioInput from './RadioInput';

const RadioGroup = ({ label, name, options, onChange, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>

      {children}

      <div className="form-inline__field-container">
        {options &&
          options.map(option => (
            <RadioInput
              key={option.value}
              name={name}
              label={option.label}
              onChange={onChange}
              value={option.value}
              checked={option.value}
            />
          ))
        }
      </div>
    </div>
  );
};

export default RadioGroup;

Answer 1

在某些情况下，将组件作为 prop 传递是绝对明智的。事实上，它是许多 React 库中使用的模式，包括 React Router，它允许您传递 component。支持 Route component .

在你的例子中，render你的功能FormControlGroup组件可能看起来像这样:

render({component, ...}) { // component is a prop
  const InputComponent = component;
  return (
    ... // outer divs
    { options.map(option =>
      <InputComponent key={option.value} ... />
    }
    ...
  )
}

然后你会像这样使用它:

<FormControlGroup
  label="Radio buttons"
  name="test"
  options=[{label: 'one', value: 1}, {label: 'two', value: 2}, {label: 'three', value: 3}]
  component={CheckboxInput}
/>

另一种选择是创建一个新组件来负责渲染外部 <div>元素然后映射options到某个外部组件中的输入组件列表。这使您可以减少对任何给定输入组件应该期待什么 Prop 的假设。由于您已经在使用 children ，您必须将其分成两个部分。这是可能看起来像的一种可能性:

const FormControlGroup = ({ label, children }) => {
  return (
    <div className="form-group form-inline">
      <span className="faux-label">{label}</span>
      {children}
    </div>
  );
};

const FormControlOptions = ({ children }) => {
  return (
    <div className="form-inline__field-container">
      {children}
    </div>
  );
};

const SomeOuterComponent = ({ label, name, options, onChange }) => {
  <FormControlGroup label={label}>
    ... // other children
    <FormControlOptions>
      {
        options.map(option =>
          <CheckboxInput
            key={option.value}
            name={name}
            label={option.label}
            onChange={onChange}
            value={option.value}
            checked={option.value}
          />
        )
      }
    </FormControlOptions>
  </FormControlGroup>
}

当然，有很多方法可以设计这个。您使用的具体实现将取决于您的用例。