javascript - page - jquery set website title




Reagiere mit Js, indem du Klassenattribute anwendest (11)

2019:

Reagieren ist See viele Dienstprogramme. Dafür brauchst du aber kein npm Paket. Erstellen Sie einfach irgendwo die Funktionsklassennamen und rufen Sie sie bei Bedarf auf.

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

oder

function classnames(obj){
 return Object.entries(obj).map( ([k,v]) => v?k:'' ).join(' ');
}

Beispiel

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

Bonus nur zur Inspiration

Sie können das Hilfselement deklarieren und es als Klassenliste verwenden, um Zugriff auf die DOMToken-Liste zu erhalten, und möglicherweise so etwas schreiben

const classes = document.createElement('span').classList; //DOMToken​List;
function classnames(obj){
 classes.value = '';
 return Object.entries(obj).reduce( (c, [k,v]) => (c.toggle(k,v),c), classes ).value;

}

Ich möchte diese Schaltflächengruppe bedingt ein- und ausblenden, je nachdem, was von der übergeordneten Komponente übergeben wird. Dies sieht folgendermaßen aus:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

....

__hasMultipleSelected: function() {
  return false; //return true or false depending on data
}

....

var TopicNav = React.createClass({
render: function() {
return (
    <div className="row">
        <div className="col-lg-6">
            <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  Bulk Actions <span className="caret"></span>
                </button>
                <ul className="dropdown-menu" role="menu">
                  <li><a href="#">Merge into New Session</a></li>
                  <li><a href="#">Add to Existing Session</a></li>
                  <li className="divider"></li>
                  <li><a href="#">Delete</a></li>
                </ul>
            </div>
        </div>
    </div>
    );
  }
});

Mit den {this.props.showBulkActions? 'Verborgenes zeigen'}. Mache ich hier etwas falsch?


Abhängig von der guten Antwort von @spitfire109 könnte man so etwas tun:

rootClassNames() {
  let names = ['my-default-class'];
  if (this.props.disabled) names.push('text-muted', 'other-class');

  return names.join(' ');
}

und dann innerhalb der Renderfunktion:

<div className={this.rootClassNames()}></div>

hält das jsx kurz


Das würde für dich funktionieren

var TopicNav = React.createClass({
render: function() {

let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`;

return (
            ...
            <div className={_myClasses}>
               ...
            </div>
    );
  }
});


Die geschweiften Klammern befinden sich in der Zeichenfolge, daher wird sie als Zeichenfolge ausgewertet. Sie müssen draußen sein, also sollte das funktionieren:

<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>

Beachten Sie das Leerzeichen nach "Nach rechts ziehen". Sie möchten nicht versehentlich die Klasse "pull-rightshow" anstelle von "pull-right show" bereitstellen. Auch die Klammern müssen vorhanden sein.


Falls Sie nur einen optionalen Klassennamen benötigen:

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1"

Ich möchte hinzufügen, dass Sie auch einen variablen Inhalt als Teil der Klasse verwenden können

<img src="http://imageurl" alt="Avatar" class="img-bot">

Der Kontext ist ein Chat zwischen einem Bot und einem Benutzer und die Stile ändern sich je nach Absender. Dies ist das Browser-Ergebnis:

var Count=React.createClass({
getInitialState: function()
{
var state={counter:1};

setInterval(function(){
this.setState(
{counter:this.state.counter+(this.state.counter==1000?9999999999:1)})
}.bind(this),1);
return state;
},

render:function(){
return(
<div>
Counter<br/>
{this.state.counter}
</div>
)
}
}
)

Sie können this npm-Paket verwenden. Es behandelt alles und bietet Optionen für statische und dynamische Klassen, die auf einer Variablen oder einer Funktion basieren.

<div ...{...this.props.showBulkActions 
? { className: 'btn-group pull-right show' } 
: { className: 'btn-group pull-right hidden' }}>


Sie können hier String-Literale verwenden

const Angle = ({show}) => {

   const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`;

   return <i className={angle} />
}

Sie können verwenden, wenn das Konzept so ist

 var Count=React.createClass({ getInitialState: function() { var state={counter:1}; setInterval(function(){ this.setState( {counter:this.state.counter+(this.state.counter==1000?9999999999:1)}) }.bind(this),1); return state; }, render:function(){ return( <div> Counter<br/> {this.state.counter} </div> ) } } ) 

Wie andere bereits kommentiert haben, ist das Dienstprogramm classnames der derzeit empfohlene Ansatz, um bedingte CSS-Klassennamen in ReactJs zu behandeln.

In Ihrem Fall sieht die Lösung folgendermaßen aus:

var btnGroupClasses = classNames(
  'btn-group',
  'pull-right',
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

...

<div className={btnGroupClasses}>...</div>

Als Randnotiz empfehle ich Ihnen, die Verwendung von show und hidden Klassen zu vermeiden, damit der Code einfacher wird. Höchstwahrscheinlich müssen Sie keine Klasse festlegen, damit etwas standardmäßig angezeigt wird.





class-attributes