Javascript 让哑巴组件变得更聪明一点

我喜欢react，也喜欢使用

export default props => (
    <div className="SuperStyled">
        {props.textMain}
        <div className="moreDetail">
           {props.textSub}
        </div>
    </div>
)

导出默认道具=>(
{props.textMain}
{props.textSub}
)

允许我在运行中快速使用特殊样式的组件。但我发现，如果我做得更详细一点，我就可以通过组件调用中的小样式更快地构建页面

export default props => (
    <div className={'SuperStyled ' + props.textColor + " " + props.shadowColor}>
        {props.textMain}
        <div className="moreDetail">
           {props.textSub}
        </div>
    </div>
)

导出默认道具=>(
{props.textMain}
{props.textSub}
)

这时我注意到，如果我没有通过

props.textColor

，它默认为

undefined

。这很有道理

---

在这种类型的组件中，是否有必要检查如果没有传递道具，它将默认为某个东西（例如

'

）？

您可以执行以下操作

const MyComponent = props => (
     <div className={'SuperStyled ' + props.textColor + " " + props.shadowColor}>
          {props.textMain}
          <div className="moreDetail">
            {props.textSub}
          </div>
      </div>
)

MyComponent.defaultProps = { // you can set default/fallback value here for the props
    textColor: '', 
    shadowColor: ''
}
export default MyComponent;

const MyComponent=props=>(
{props.textMain}
{props.textSub}
)
MyComponent.defaultProps={//您可以在此处为这些道具设置默认/回退值
textColor:“”，
阴影颜色：“”
}
导出默认MyComponent；

您可以执行以下操作

const MyComponent = props => (
     <div className={'SuperStyled ' + props.textColor + " " + props.shadowColor}>
          {props.textMain}
          <div className="moreDetail">
            {props.textSub}
          </div>
      </div>
)

MyComponent.defaultProps = { // you can set default/fallback value here for the props
    textColor: '', 
    shadowColor: ''
}
export default MyComponent;

const MyComponent=props=>(
{props.textMain}
{props.textSub}
)
MyComponent.defaultProps={//您可以在此处为这些道具设置默认/回退值
textColor:“”，
阴影颜色：“”
}
导出默认MyComponent；

您也可以在这种情况下使用defaultProps，使用lib确实可以解决这个问题！你也可以在这种情况下使用defaultProps，使用lib真的可以解决这个问题！