Блог

Главная - Вопросы по программированию - Как использовать функции в функциональном компоненте React

Как использовать функции в функциональном компоненте React

#reactjs

#reactjs

Вопрос:

У меня есть этот код, который использует компонент на основе классов:

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

Комментарии:

1. Использование то же самое, только без this , т.е. function renderHello() {... и {renderHello()} .

Ответ №1:

Вот как вы можете это сделать.

 


function Sidebar() {


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

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

Комментарии:

1. В чем разница между const и function для renderHello ?

2. То, что мы здесь сделали, это использовали функцию со стрелкой, присвоив ее renderHello.

3. Так что в некотором смысле renderHello все еще является функцией

4. Я понимаю, но в чем разница между написанием const renderHello = () => {} и function renderHello() {} ? Это просто разница в синтаксисе?

5. ОК. Спасибо. Ценю всю помощь!!