javascript - 让愚蠢的组件变得更聪明

Question

我喜欢 React，我也喜欢使用

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。哪种排序有意义。

在这种风格的组件中是否有检查如果 props 没有传递它会默认为某些东西(例如 ' ')？

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;