Question

    import React, { Component } from 'react';
import { Media } from 'reactstrap';

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dishes: [
                {
                  id: 0,
                  name:'Uthappizza',
                  image: 'assets/images/uthappizza.png',
                  category: 'mains',
                  label:'Hot',
                  price:'4.99',
                  description:'A unique combination.' },
        };
    }

render() {
    const menu = this.state.dishes.map((dish) => {
        return (
          <div key={dish.id} className="col-12 mt-5">
            <Media tag="li">
              <Media left middle>
                  <Media object src={dish.image} alt={dish.name} />
              </Media>
              <Media body className="ml-5">
                <Media heading>{dish.name}</Media>
                <p>{dish.description}</p>
              </Media>
            </Media>
          </div>
        );
    });

    return (
      <div className="container">
        <div className="row">
          <Media list>
              {menu}
          </Media>
        </div>
      </div>
    );
}
}

export default Menu;

这是我在开始反应时学到的代码，但是反应提供了钩子，我似乎还不能完全理解它们，我需要将此类转换为函数。我想跟上技术的变化。

Answer 1

您可以删除构造函数，而使用react hook来管理状态。

我建议您仔细阅读以下内容：https://reactjs.org/docs/hooks-state.html

import React, { Component } from 'react';
import { Media } from 'reactstrap';

function Menu (){
 
  const [dishes, setDishes] = useState({ dishes: [
    {
      id: 0,
      name:'Uthappizza',
      image: 'assets/images/uthappizza.png',
      category: 'mains',
      label:'Hot',
      price:'4.99',
      description:'A unique combination.' },
]} )

  

    const menu = dishes.map((dish) => {
        return (
          <div key={dish.id} className="col-12 mt-5">
            <Media tag="li">
              <Media left middle>
                  <Media object src={dish.image} alt={dish.name} />
              </Media>
              <Media body className="ml-5">
                <Media heading>{dish.name}</Media>
                <p>{dish.description}</p>
              </Media>
            </Media>
          </div>
        );
    });

    return (
      <div className="container">
        <div className="row">
          <Media list>
              {menu}
          </Media>
        </div>
      </div>
    );
}


export default Menu;

Answer 2

我强烈建议您阅读official docs。但我会解释一下。
与必须导入react的类组件相同。
如果要在组件中使用状态，则也应该导入useState。

import React,{useState} from react

然后您只需编写一个这样的函数

const yourComponent = (props)=>{
    //your code
}

该函数中的props与类中的this.props类似
要呈现您的JSX，只需将您的JSX返回钩子即可，例如：

const yourComponent = (props)=>{
    return (<div>Hello World</div>)
}

要使用状态和方法，您可以执行以下操作：

const yourComponent = (props)=>{
    const [count,increaseCount] = useState(0); //this will create a state named count with 
    value of 0
    const clickHandler = ()=>{
        insreaseCount(count+1) // and this will update the count state
    }
    return (<div onClick={clickHandler}>{count}</div>)
}

Answer 3

import React, { useState } from 'react';
import { Media } from 'reactstrap';

const Menu = () => {
  const [dishes, setDishes] = useState([
    {
      id: 0,
      name:'Uthappizza',
      image: 'assets/images/uthappizza.png',
      category: 'mains',
      label:'Hot',
      price:'4.99',
      description:'A unique combination.' 
    }]); 

  const menuContent = () => {
    return dishes.map((dish) => {
      return (
        <div key={dish.id} className="col-12 mt-5">
          <Media tag="li">
            <Media left middle>
                <Media object src={dish.image} alt={dish.name} />
            </Media>
            <Media body className="ml-5">
              <Media heading>{dish.name}</Media>
              <p>{dish.description}</p>
            </Media>
          </Media>
        </div>
      );
    });
  }
  
  return (
    <div className="container">
      <div className="row">
        <Media list>
          {menuContent()}
        </Media>
      </div>
    </div>
  );
}

export default Menu;

如何将此类更改为在react.js中具有钩子的函数？

3 个答案: