如何给Title组件起名字?我在它下面尝试了 Title.displayName 我得到了一个错误。
class Menu extends Component {
static Title = ({ children, handleTabClick }) => {
return (
<div className="title" onClick={handleTabClick}>
{children}
</div>
);
};
//Title.displayName = 'title' //won't work
render() {
return React.Children.map(this.props.children, child =>
React.cloneElement(child)
)
}
}
除非我在类之外声明 Title,否则我不知道如何给它命名。
最佳答案
函数 name
和 displayName
属性用于调试目的,不是必需的。通常可以忽略它们以支持更精简的代码。
如果 name
是可取的,它可以是:
class Menu extends Component {
static Title = function Title({ children, handleTabClick }) {
return (
<div className="title" onClick={handleTabClick}>
{children}
</div>
);
};
...
或者只是:
class Menu extends Component {
static Title({ children, handleTabClick }) {
return (
<div className="title" onClick={handleTabClick}>
{children}
</div>
);
}
...
name
足以调试,displayName
is non-standard大多数浏览器默认不使用。
可以通过装饰器方便地将属性分配给静态方法(如果这是实例方法,分配方式可能会有所不同):
function displayName(name) {
return (target, prop, descriptor) => {
target[prop].displayName = name;
};
}
class Menu extends Component {
@displayName('Title')
static Title({ children, handleTabClick }) {
return (
<div className="title" onClick={handleTabClick}>
{children}
</div>
);
}
...
关于javascript - 分配 displayName 以 react 静态组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49912539/