[英]Having different props but in same component
I have a component called Tooltip我有一个名为 Tooltip 的组件
In the component, we pass "forceOpen: true"在组件中,我们传递“forceOpen: true”
<Tooltip
allowOverflow:false
aria-label:false
children:ƒ () {}
color:"primary"
disableTooltipPointerEvents:true
forceOpen: true
falsehideOnClick:true
position:"top"
shouldShow:true
spacing:9.5
text:'offline'
>
</Tooltip>
But in other place used that component without "forceOpen: true"但是在其他地方使用了没有“forceOpen:true”的组件
<Tooltip
allowOverflow:false
aria-label:false
children:ƒ () {}
color:"primary"
disableTooltipPointerEvents:true
falsehideOnClick:true
position:"top"
shouldShow:true
spacing:9.5
text:'offline'
>
</Tooltip>
I have seen this pattern in a lot of places.我在很多地方都看到过这种模式。 That the same component has different props or common props.
同一个组件有不同的道具或共同的道具。 I don't know what it called.
我不知道它叫什么。 Can anyone explain how this thing actually works
谁能解释这件事实际上是如何工作的
Let's say your source code for the Tooltip
looks like this:假设您的
Tooltip
源代码如下所示:
const Tooltip = (props) => {
const forceOpen = props.forceOpen || 'default';
return {forceOpen!='default' ? <div>Tip</div> : null}
}
you can then set or not the forceOpen
but in the cases where you don't the effect will be the default one.然后,您可以设置或不设置
forceOpen
但在您不设置的情况下,效果将是默认设置。
I am not sure there is a specific pattern for this other then the common encapsulation and the default values for properties:)除了通用封装和属性的默认值之外,我不确定是否有特定的模式:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.