reactjs中的render和class内部的函数

小编典典

reactjs中的render和class内部的函数

reactjs

我正在尝试学习reactjs并且有一些不确定性。我指的是react
DOCS和其他一些教程，我看到函数是在render函数和类内部编写的。我们应该在render函数内部做些什么反应？

第一种方式

class App extends Component {

    test(user) {

        return user.firstName;
    }

    render() {

        const user = {
            firstName: 'Harper',
            lastName: 'Perez'
        };

        return (

            <div>

                <h1>{this.test(user)}</h1>

            </div>
        )
    }
}

第二路

class App extends Component {

       render() {

        const user = {
            firstName: 'Harper',
            lastName: 'Perez'
        };

        function test(user) {

            return user.firstName;
        }

        return (

            <div>

                <h1>{test(user)}</h1>

            </div>

        )

    }
}

这两种方法都有效。但是我想知道什么是最好的方法吗？最重要的是，我想知道我可以在render函数中做什么事情。

谢谢。

阅读 1068

2020-07-22

共1个答案

小编典典

我认为这最终是您的选择，但我个人更喜欢仅将功能放在render中，这些功能专门处理渲染组件和/或JSX（即，在prop上进行映射，根据prop来有条件地加载适当组件的switch语句等）。
）。如果该函数背后的逻辑很沉重，我将使其不渲染。

这是一个例子。假设您的组件中有一个“用户”道具，该道具应该显示用户列表。您可能具有以下类型的事物的render函数：

render(){



  // An array of user objects & a status string.

  const { users, status } = this.props;



  // Map users array to render your children:

  const renderUserList = () => {

    return users.map(user => {

      return <div>{ user.firstName }</div>;

    });

  };



  // Conditionally load a component:

  const renderStatus = () => {

    let component = '';

    switch(status){

      case 'loading':

        component = <Component1 />

        break;

      case 'error':

        component = <Component2 />

        break;

      case 'success':

        component = <Component3 />

        break;

      default:

        break;

    }



    return component;

  }



  // render() return:

  return(

    <div>

      <div className="status">

        { renderStatus() }

      </div>

      <div className="user-list">

        { renderUserList() }

      </div>

    </div>

  );

}

但是，如果您有一个需要以某种方式操纵有关用户数据的函数，则最好将其放在render之外的函数中。

2020-07-22