reactjs中的render和class内部的函数

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试学习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函数中做什么事情。

谢谢。

回答：

我认为这最终是您的选择，但我个人更喜欢仅将功能放在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之外的函数中。

以上是 reactjs中的render和class内部的函数 的全部内容， 来源链接： utcz.com/qa/430710.html

回到顶部