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

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

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

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

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

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

成分a

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
const propTypes={}；
const defaultProps={}；
类扩展组件{
建造师（道具）{
超级（道具）；
}
renderLastItem（）{
如果（！this.props.something）{
返回null；
}
返回this.props.something[this.props.something.length-1]；
}
render（）{
返回(
某物
{this.renderLastItem（）}

);
}
}
samreak.propTypes=propTypes；
samreake.defaultProps=defaultProps；
出口违约担保；

成分B

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
const propTypes={}；
const defaultProps={}；
类SampleB扩展组件{
建造师（道具）{
超级（道具）；
}
renderLastItem（）{
如果（！this.props.something）{
返回null；
}
返回this.props.something[this.props.something.length-1]；
}
render（）{
返回(

某物
别的
{this.renderLastItem（）}

);
}
}
SampleB.propTypes=propTypes；
SampleB.defaultProps=defaultProps；
导出默认样本；

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

  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>
    )
  }
}

从“./somewhere”导入renderLastItem
导出默认类组件{
render（）{
返回(
某物
{renderLastItem（this.props.something）}

)
}
}

您完全可以将道具传递给高阶组件！HOC只是一个函数，它将一个组件作为参数，并返回另一个组件作为结果。因此，您可以使用LastOfSomething组件创建更高阶的

，如下所示：

import renderLastItem   from './somewhere'

export default class SampleA extends Component {

  render() {

    return (

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

具有最后一项功能（组件）{
返回函数（{something，…otherProps}）{
const item=something？something[something.length-1]：空；
返回；
}
}

或者使用ES6 arrow函数，更紧凑地如下所示：

import renderLastItem   from './somewhere'

export default class SampleA extends Component {

  render() {

    return (

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

constwithlastofsomething=（组件）=>（{something，…otherProps}）=>{
const item=something？something[something.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>
    )
  }
}

const SampleB with lastofsomething=with lastofsomething（SampleB）；
返回（）；
非常感谢您！因此，在我的示例中，我应该编写代码“export default（）”？使用此模式的一个很酷的事情是，您可以将其作为组件固有的概念应用-在这种情况下，是的，您可以这样做-或者作为组件父级固有的概念应用，在这种情况下，您可以在渲染时应用它。哪一个对你最有意义！