DRY jsx渲染方法

Question

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

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}} and {{selectAsync}}

在 jsx 部分渲染它们

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

DRY jsx渲染方法

DRY jsx render method

javascript

dry

ecmascript-6

reactjs