函数内部的render和class in reactjs [英] Function inside render and class in reactjs
问题描述
我正在努力学习反应,我有一些不确定因素。我正在引用反应DOCS和其他一些教程,我看到函数写在渲染函数内部,也在类内部。我们应该在render函数里面做什么反应?
I'm trying to learn reactjs and i have some uncertainties. I was refering react DOCS and some other tutorials and i saw functions are written inside render function and also inside class. What things should we do inside render function in react?
第一种方式
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>
)
}
}
这两种方法都有效。但我想知道这样做的最佳方法是什么?最重要的是,我想知道我在渲染功能中可以做什么样的事情。
Both this methods work. But i want to know what is the best method to do this? Most importantly i want to know what kind of things i can do inside render function.
谢谢。
推荐答案
我认为这最终是你的选择,但我个人更喜欢只在渲染中放置渲染组件和/或JSX的函数(即映射到prop,有条件地加载适当组件的switch语句)基于道具等...)。如果函数背后的逻辑很重,我会将它从渲染中删除。
I think it's ultimately your choice, but I personally prefer only putting functions within render that deal exclusively with rendering components and/or JSX (i.e. mapping over a prop, switch statements that conditionally load a proper component based on a prop, etc...). If the logic behind the function is heavy, I'll leave it out of render.
这是一个例子。在你的组件中说你有一个用户道具应该显示一个用户列表。你可能有这些类型的渲染函数:
Here's an example. Say in your component you have a "users" prop that is supposed to display a list of users. You might have a render function with these types of things:
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>
);
}
但是,如果你有一个需要以某种方式操纵用户数据的函数,最好把它放在渲染之外的函数中。
However, if you had a function that needed to somehow manipulate data about a user, it might be better to put that in a function outside of render.
这篇关于函数内部的render和class in reactjs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!