ComponentA

Question

当两个组件共享一些相同的方法但布局不同时，如何避免编写相同的代码？

下面的示例组件有一个方法“renderLastItem”，它使用父组件传递的prop“something”。

我考虑过使用高阶组件模式，但我不确定我是否可以将道具作为高阶组件的参数传递。

下面的示例代码非常简单，因此在此示例代码中，我只需要使用If语句并根据组件类型更改布局，但在实际代码中，我有更多代码，我想避免使用if语句，以便根据组件的类型更改布局。

如何避免在多个组件中编写相同的逻辑？

ComponentA

import React, { Component } from 'react';
import PropTypes from 'prop-types';

const propTypes = {};
const defaultProps = {};

class SampleA extends Component {

    constructor(props) {
        super(props);
    }


    renderLastItem() {

        if(!this.props.something) {
            return  null;
        }

        return this.props.something[this.props.something.length - 1];

    }


    render() {

        return (

            <div>
                <h1>Something</h1>
                <p>{this.renderLastItem()}</p>
            </div>

        );

    }
}

SampleA.propTypes = propTypes;
SampleA.defaultProps = defaultProps;

export default SampleA;

以componentB

import React, { Component } from 'react';
import PropTypes from 'prop-types';

const propTypes = {};
const defaultProps = {};

class SampleB extends Component {

    constructor(props) {
        super(props);
    }


    renderLastItem() {

        if(!this.props.something) {
            return  null;
        }

        return this.props.something[this.props.something.length - 1];

    }


    render() {

        return (

            <div>
                <ul>
                    <li>Something</li>
                    <li>Something else</li>
                    <li>{this.renderLastItem()}</li>
                </ul>
            </div>

        );

    }
}

SampleB.propTypes = propTypes;
SampleB.defaultProps = defaultProps;

export default SampleB;

Answer 1

您可以分离传递道具并执行逻辑的函数

  export default renderLastItem = (passedProps) => {

    if(!passedProps) {
      return  null;
    }

    return passedProps [passedProps.length - 1]

  }

然后将其导入到您需要的任何地方，例如：

import renderLastItem   from './somewhere'

export default class SampleA extends Component {

  render() {

    return (

        <div>
            <h1>Something</h1>
            <p>{renderLastItem(this.props.something)}</p>
        </div>
    )
  }
}

Answer 2

你绝对可以将道具传递给高阶组件！ HOC只是一个函数，它将Component作为参数，并返回另一个Component作为结果。因此，您可以像这样创建一个高阶withLastOfSomething组件：

function withLastOfSomething(Component) {
  return function({something, ...otherProps}) {
    const item = something ? something[something.length - 1] : null;
    return <Component item={item} {...otherProps} />;
  }
}

或者使用ES6箭头功能，更加紧凑如下：

const withLastOfSomething = (Component) => ({something, ...otherProps}) => {
  const item = something ? something[something.length - 1] : null;
  return <Component item={item} {...otherProps} />;
}

然后像这样使用它：

const SampleBWithLastOfSomething = withLastOfSomething(SampleB);

return (<SampleBWithLastOfSomething something={...} />);

如何避免在具有不同布局的组件中编写相同的逻辑？

ComponentA

以componentB

2 个答案: