让这些愚蠢的组件变得更聪明

Question

我喜欢反应，我也喜欢使用

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

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

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

这时，我注意到，如果我不通过props.textColor，它默认为undefined。这是有道理的。

在这种组件样式中是否有检查，如果没有传递道具，它将默认为某些东西(如' ')？

Answer 1

你可以做这样的事

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;