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

尝试一下

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 2

您的Liste函数是一个功能组件，因此需要像任何其他react组件一样包含它，并且不要作为函数执行。只需将App组件中的return语句替换为

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

您可以通过此链接学习语法-https://devhints.io/react

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;

反应调用函数？

3 个答案: