Question

我编写了一个组件，该组件中还有一些其他小组件实例。对每个实例使用renderxxx是不好的做法吗？谢谢

Answer 1

这取决于。如果您使用某种逻辑来渲染组件，那么您应该使用专用的renderX方法。但是如果你要做的就是返回组件，你应该简单地用JSX来描述它。

没有逻辑

const MyComponent = ({ options }) => (
  <div>
    <SelectList options={options} />
  </div>
);

使用逻辑

const MyComponent = ({ options }) => {
  const renderOptions = () => {
    if (options.length < 5) {
      return <RadioButtonGroup options={options} />;
    }

    return <SelectList options={options} />;
  };

  return (
    <div>
      {renderOptions()}
    </div>
  );
};

另一个approch将围绕每个renderX方法包装另一个组件。

const OptionsRenderer = ({ options }) => {
  if (options.length < 5) {
    return <RadioButtonGroup options={options} />;
  }

  return <SelectList options={options} />;
};

const MyComponent = ({ options }) => (
  <div>
    <OptionsRenderer options={options} />
  </div>
);

在组件中有很多渲染方法不好的做法？

1 个答案: