Реагировать на вызывающую функцию?

Question

Немного нововведен, чтобы реагировать и играть со списками, не уверен, почему мой код не работает должным образом, когда я вызываю метод, он отображает просто html

Я пытался поместить его между тегами, но ничего

Может кто-нибудь указать, что я делаю не так?

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import List from './List'

class App extends Component { //different
  render() { //different
    // The rest of the file is the same
    return(
    <div className="App"> 
    Liste();

    </div>)
  };


}

function Liste(){
  const names=['d','d']

  return(<div>
  <h2>{names[0]}</h2>
   <h2> {names[1]}</h2>
  </div>)
}

export default App;

Answer 1

Ваша Liste функция является функциональным компонентом, поэтому ее нужно включать как любой другой реагирующий компонент, а не выполнять как функцию. Просто замените свой оператор возврата в компоненте приложения на

return(
    <div className="App"> 
      <Liste />;
    </div>)
  };

. Вы можете go по этой ссылке, чтобы узнать синтаксис - https://devhints.io/react

Answer 2

Попробуйте это

const Liste = () => {
  const names=['d','d']

  return(
     <div>
        <h2>{names[0]}</h2>
        <h2> {names[1]}</h2>
     </div>
   );
};

class App extends Component {
  render() {
    return(
        <div className="App"> 
          <Liste />
        </div>
    );
  };
}

export default App;

Answer 3

Попробуйте это.

class App extends Component { //different
  render() { //different
    // The rest of the file is the same
    return(
    <div className="App"> 
    {Liste()}

    </div>)
  };


}

function Liste(){
  const names=['d','d']

  return(<div>
  <h2>{names[0]}</h2>
   <h2> {names[1]}</h2>
  </div>)
}

export default App;