web-dev-qa-db-ja.com

Reactクラスレンダリングメソッドの要素に動的classNameを提供する方法

Alertという名前のReactClassがあります。そのrenderメソッドは、要素の作成中に渡されたタイプに応じて、クラスalert alert-successまたはalert alert-errorのdivを返します。アラート要素のタイプに基づいてクラスを追加する方法を知りたいだけです。

これが私の試みです：

var Alert = ReactClass({
  render: function() {
    return <div className="alert {this.props.type}">{this.props.message}</div>
  }
});

var successAlert = React.createElement(Alert, {
  type: 'alert-success'
  message: 'Information saved successfully!!'
});

JSXテンプレートがコンパイルされると、this.props.typeは要素に渡されたクラスに変換されません。これを達成する方法は？

javascriptreactjsrendering
6
sachinjain024

質問に対する答えを見つけたようです。私たちは単にこのようなことをすることができます：

var Alert = ReactClass({
  render: function() {
    return <div className={"alert " + this.props.type}>{this.props.message}</div>
  }
});

クラスをテンプレートエバリュエーター内に配置するだけです{ } この場合。小道具と状態に基づいてクラス文字列を作成します。

これが他の人に役立つことを願っています。

5
sachinjain024

これを実現する1つの方法は、すべてのクラスを含む文字列を作成し、それをコンポーネントのclassNameに設定することです。

var Alert = ReactClass({

  var yourClassName = 'alert ';

  // Add any additional class names
  yourClassName += this.props.type + ' ';

  render: function() {
    return <div className={yourClassName}>{this.props.message}</div>
  }
});

または、クラス名を配列に格納し、使用する準備ができたらクラスフレンドリーな文字列に変換することもできます。

var Alert = ReactClass({

  var yourClassArray = [];

  // Add any additional class names
  yourClassArray.Push('alert');
  yourClassArray.Push(this.props.type);

  var classString = yourClassArray.join(' ');

  render: function() {
    return <div className={classString}>{this.props.message}</div>
  }
});
2
Nick Zuber

classnames パッケージを見てください。あなたはこのようなことをすることができます：

className={classNames('alert', `alert-${type}`)}

または

className={classNames({
    'alert': true,
    'alert-success': success,
    'alert-error': error
})
1
David L. Walsh

コードを書く

className={`form-control-sm d-inline per_player ${"per_player_b_" + index + "_score"}`}

そしてあなたはを得るでしょう

enter image description here

0
Pradip Rupareliya

JavaScriptを使用できます テンプレートリテラル

var Alert = ReactClass({
  render: function() {
    return <div className={`alert ${this.props.type}`}>{this.props.message}</div>
  }
});

コードは次のように記述できます。

const Alert = ({type, message}) =>
    <div className={`alert ${type}`}>{message}</div>
0
Vlad Bezden