在React中,你可以使用ES6的类属性(class properties)或者函数组件中的默认参数(default parameters)来定义props的默认值。
1.类组件中定义默认props
对于类组件,你可以在组件内部使用defaultProps
属性来定义默认的props值:
class MyComponent extends React.Component {
render() {
return <div>{this.props.name}</div>;
}
}
MyComponent.defaultProps = {
name: 'Default Name'
};
这样,如果name
属性没有被传递给MyComponent
,它将默认使用'Default Name'
。
2.函数组件中定义默认props
对于函数组件,你可以使用参数默认值来定义props的默认值:
function MyComponent({ name = 'Default Name' }) {
return <div>{name}</div>;
}
在这个例子中,如果name
没有被传递,它将默认为'Default Name'
。
3.使用React.Component
的子类
如果你在使用React.Component
作为基类来创建组件,你可以在构造函数中设置默认props:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return <div>{this.props.name}</div>;
}
}
MyComponent.defaultProps = {
name: 'Default Name'
};
4.使用Hooks的函数组件
对于使用Hooks的函数组件,你仍然可以使用默认参数,也可以获取到children:
function MyComponent({ name = 'Default Name',children="" }) {
// 使用Hooks
// 获取props中的children
return (
<div>
<h2>{name}</h2>
<div>{childrdn}</div>
</div>
);
}