我正在尝试学习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之外的函数中。