React bileşenlerine koşullu olarak özellikleri nasıl eklerim?

React bileşenine yalnızca belirli bir koşul karşılandığında özellikler eklemenin bir yolu var mı?

Oluşturduktan sonra bir Ajax çağrısı dayalı form öğelerine gerekli ve readOnly öznitelikleri eklemek gerekiyordu, ancak readOnly = "false" özniteliği tamamen atlamak aynı değildir çünkü bu nasıl çözülemiyor.

Aşağıdaki örnek ne istediğimi açıklamalı, ancak çalışmaz (Ayrıştırma Hatası: Beklenmeyen tanımlayıcı).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

Görünüşe göre, belirli özellikler için React, geçtiğiniz değer doğru değilse özelliği atlayacak kadar zekidir. Örneğin:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

sonuçlanacak:

<input type="text" required>

Güncelleme: Herkes, özellikle hatları, bu durumda, neden ReactDOM kaynak kodunda ayrıntıları bulabilirsiniz nasıl / geldiğini merak ediyor ise 30 ve 167 arasında DOMProperty.js dosyası.

juandemarco'nun cevabı genellikle doğrudur, ancak işte başka bir seçenek.

Nasıl bir nesne oluşturun:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

İsteğe bağlı olarak diğer desteklerden geçerek yayılmış hale getirin.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

Burada kullanan bir örnek , özyükleme sitesindeki Buttonile React-Bootstrap (sürüm 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

Durumuna bağlı olarak, ya {bsStyle: 'success'}ya {}iade edilir. Forma operatörü daha sonra döndürülen nesnenin özelliklerini Buttonbileşene yayar . Falsy durumunda, döndürülen nesne üzerinde hiçbir özellik olmadığından, bileşene hiçbir şey iletilmez.

Andy Polhill'in yorumuna dayanan alternatif bir yol :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

Sadece küçük fark, ikinci örnekte iç bileşen olmasıdır <Button/>'in propsamacı, bir anahtar olacak bsStylebir değer ile undefined.

İşte bir alternatif.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

Veya satır içi sürümü

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

İşte bunu yapmanın bir yolu.

Bir şartla :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

Ben hala sahne geçerek düzenli bir şekilde kullanmayı tercih ediyorum, çünkü herhangi bir koşul olmaması durumunda daha okunabilir (bence).

Koşulsuz :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Bileşenleri ( {isVisible && <SomeComponent />}) eklemek / kaldırmak için kullanılan kısayolu kullanabilirsiniz .

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

Koşul doğru olduğunda özel bir özellik (aria- * veya data- * kullanarak) eklemek istediğimizi varsayalım:

{...this.props.isTrue && {'aria-name' : 'something here'}}

Bir koşul doğruysa bir stil özelliği eklemek istediğimizi varsayalım:

{...this.props.isTrue && {style : {color: 'red'}}}

ECMAScript 6 kullanıyorsanız, böyle yazabilirsiniz.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

Ajax çağrısından sonra durumunuz değişeceğinden ve üst bileşen yeniden oluşturulacağından, bu çalışmalıdır.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

React'te koşullu olarak Bileşenler'i, ancak aynı zamanda props, className, id ve diğerleri gibi niteliklerini oluşturabilirsiniz.

React'te, koşullu olarak Bileşenler oluşturmanıza yardımcı olabilecek üçlü operatörü kullanmak çok iyi bir uygulamadır .

Bir örnek ayrıca, Bileşenin ve stil özelliğinin koşullu olarak nasıl oluşturulacağını gösterir.

İşte basit bir örnek:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

JSX yazısını dikkate alarak, sorununuzu şu şekilde çözebilirsiniz:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);