如何在功能组件React中使用函数

Question

我有使用基于类的组件的这段代码：

export default class Sidebar extends Component {
  renderHello() {
    return <h1>Hello</h1>
  }

  render() {
    return (
      <Wrapper>
        {this.renderHello()}
      </Wrapper>
    );
  }
}

如您所见，我在renderHello方法中调用render()以创建一个h1。如何使用基于类的组件来做到这一点？

function Sidebar() {

  {/* Should I write the function here?? */}

  return (
    <div>
      {/* How to call a function here?? */}
    </div>
  )
}

Answer 1

这是您可以做到的方式。

function Sidebar() {


  const renderHello = () => <h1>Hello</h1>

  return (
    <div>
      {renderHello()}
    </div>
  )
}