Question

所以，假设我正在创建一个简单的Web布局，我在MainContent组件上方有一个反馈消息组件，如下所示：

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

我们假设我有不同类型的消息，例如error，warning，success。

在FeedBackMessage内，我可能会有这样的事情：

class FeedBackMessage extends Component {
  renderMessage(){
    const {shouldRenderMessage, typeMessage, message } = this.props;
    if (shouldRenderMessage === true){
      <div>
        {message}
      </div>
    }
  }
  render(){
    return (
      <div>
        {this.renderMessage().bind(this)}
      </div>
    )
  }
}

我对如何根据FeedBackMessage道具价值呈现typeMessage样式感到难过。

例如，如果我将typeMessage传递给'错误'，我希望FeedbackMessage组件具有红色边框样式。或者如果我通过confirm，我想用绿色边框渲染。

Answer 1

这一切都非常依赖于你的造型解决方案。

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

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>
    )
  }
}

如果您想使用样式表进行样式设置，可以使用classnames之类的内容根据某些逻辑切换类，然后将该类添加到您的组件中。

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;
}

Answer 2

官方文档将为您提供帮助。请检查here

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

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

React.js - 基于道具渲染具有不同样式的组件

2 个答案: