Javascript React.js-基于道具呈现不同样式的组件

假设我正在创建一个简单的web布局，在

MainContent

组件上方有一个反馈消息组件，如下所示：

class WebLayout extends Component {
  render() {
    <div>
      <Header />
      <FeedBackMessage 
        shouldRenderMessage={true}
        typeMessage={"error"}
        message={"Wrong input!"}
      />
      <MainContent />
    </div>
  }
}

如何根据

typeMessage

prop值呈现

FeedBackMessage

样式，这让我感到困惑

---

例如，如果我传递带有“error”的

typeMessage

，我希望使用带有红色边框样式的

FeedbackMessage

组件。或者，如果我通过确认，我希望使用绿色边框进行渲染。

这一切都取决于您的样式设置解决方案

如果要使用内联样式，它可能如下所示：

class FeedBackMessage extends Component {
  renderMessage(){
    const {shouldRenderMessage, typeMessage, message } = this.props;
    if (shouldRenderMessage === true){
      <div>
        {message}
      </div>
    }
  }
  render(){
    const componentStyle = {
      error: { border: "1px solid red" },
      confirm: { border: "1px solid green" }
    }[this.props.typeMessage];

    return (
      <div style={componentStyle}>
        {this.renderMessage().bind(this)}
      </div>
    )
  }
}

---

官方文件将对你有所帮助。请查收

render（）{
让className='menu'；
如果（this.props.isActive）{
className+=‘菜单激活’；
}
返回菜单
}

感谢您的输入！有没有办法使用干燥的方法？例如，如果我有10多条不同的消息，会发生什么？使用您的方法，这意味着我必须有10多个不同的css类名。在DRY方面，如果您需要基于类型名的不同行为，那么您并不是在重复自己。如果可能有3种不同的颜色，您可能可以重复使用相同的类名，并且在类名和类型名之间有一个1对多的映射。您可以使用

this.props.typeName

作为类名，使其更加简洁，但您仍然有10多个类。如果您真的认为这仍然是太多的类，那么您可能希望尝试内联样式以完全避免类。

class FeedBackMessage extends Component {
  renderMessage(){
    const {shouldRenderMessage, typeMessage, message } = this.props;
    if (shouldRenderMessage === true){
      <div>
        {message}
      </div>
    }
  }
  render(){
    const componentStyle = {
      error: { border: "1px solid red" },
      confirm: { border: "1px solid green" }
    }[this.props.typeMessage];

    return (
      <div style={componentStyle}>
        {this.renderMessage().bind(this)}
      </div>
    )
  }
}

class FeedBackMessage extends Component {
  renderMessage(){
    const {shouldRenderMessage, typeMessage, message } = this.props;
    if (shouldRenderMessage === true){
      <div>
        {message}
      </div>
    }
  }
  render(){
    const componentClass = classNames('FeedBackMessage', {
      "error": this.props.typeName === 'error',
      "confirm": this.props.typeName === 'confirm'
    });

    return (
      <div className={componentClass}>
        {this.renderMessage().bind(this)}
      </div>
    )
  }
}

.FeedBackMessage .error {
  border: 1px solid red;
}

.FeedbackMessage .confirm {
  border: 1px solid green;
}

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }

  return <span className={className}>Menu</span>
}