javascript - DRY jsx 渲染方法

Question

我想知道这是否是干燥这段代码的更好方法，你们有什么想法吗？ Prop 是一样的，只是组件改变了......

render() {
    const { input: { value, onChange }, callback, async, ...rest } = this.props;

    if (async) {
      return (
        <Select.Async
          onChange={(val) => {
            onChange(val);
            callback(val);
          }}
          value={value}
          {...rest}
        />
      );
    }

    return (
      <Select
        onChange={(val) => {
          onChange(val);
          callback(val);
        }}
        value={value}
        {...rest}
      />
    );
  }

Answer 1

与:

let createElement = function(Component) {
    return (
        <Component onChange={(val) => { 
            onChange(val);
            callback(val);
            }}
            value={value}
        {...rest}
      />
    );
};

你可以做到

let selectAsync = createElement(Select.Async);
let select = createElement(Select);

您可以使用 {{select}} 和 {{selectAsync}} 在 jsx 部分渲染它们

P.S.:我没有直接测试这个，但几天前做了一些非常类似的事情，所以这种方法应该有效。请注意，Component 必须以大写字母开头。