Wie stellen Sie Standard-Requisiten für die geschachtelte Form Reagieren?

Gibt es eine Möglichkeit in Reagieren liefern Standard-Requisiten, um ein verschachteltes array von Elementen einer bestimmten Form?

Gegeben, wie das Beispiel unten mein Erster Versuch gesehen werden kann, aber dies funktioniert nicht wie erwartet. 

static propTypes = {
    heading: PT.string,
    items: PT.arrayOf(PT.shape({
        href: PT.string,
        label: PT.string,
    })).isRequired,
};

static defaultProps = {
    heading: 'this works',
    items: [{
        href: '/',
        label: ' - this does not - ',
    }],
};

In diesem Beispiel würde ich erwarten, dass die folgenden:

//Given these props
const passedInProps = {
    items: [{ href: 'foo' }, { href: 'bar' }]
};

//Would resolve to:
const props = {
    heading: 'this works',
    items: [
      { href: 'foo', label: ' - this does not - ' },
      { href: 'bar', label: ' - this does not - ' },
    ]
};
  • Du meinst [{ href: 'foo' }, { href: 'bar' }], richtig?
  • Ich tun, aktualisiert. Guter pick-up - 3 Jahre später und ich habe nie bemerkt, dass
InformationsquelleAutor Chris | 2016-06-30
  1. 22

    Nicht. Standard-Requisiten sind nur oberflächlich zusammengeführt.

    Jedoch ein Ansatz sein könnte, ein Kind zu haben-Komponente für jedes Element. Auf diese Weise jedes Kind-Komponente empfängt ein Objekt aus der item array, und dann die Standard-Requisiten zusammengeführt werden, wie Sie es erwarten.

    Beispiel:

    var Parent = React.createClass({

  propTypes: {
    heading: React.PropTypes.string,
    items: React.PropTypes.arrayOf(React.PropTypes.shape({
      href: React.PropTypes.string,
      label: React.PropTypes.string,
    })).isRequired
  },

  getDefaultProps: function() {
    return {
      heading: 'this works',
      items: [{
        href: '/',
        label: ' - this does not - ',
      }],
    };
  },

  render: function() {
    return (
      <div>
        {this.props.item.map(function(item) {
          return <Child {...item} />
        })}
      </div>
    );
  }

});

var Child = React.createClass({

  propTypes: {
    href: React.PropTypes.string,
    label: React.PropTypes.string
  },

  getDefaultProps: function() {
    return {
      href: '/',
      label: ' - this does not - '
    };
  },

  render: function() {
    return (
      <div />
        <p>href: {this.props.href}</p>
        <p>label: {this.props.label}
      </div>
    );
  }

});
    • Solide Lösung, aber ... nicht so elegant. Alle Veränderungen Reagieren zu ermöglichen, eine vollständige Zusammenführung von Requisiten, da diese veröffentlicht wurde?
    • Nicht soweit ich weiß
    InformationsquelleAutor WickyNilliams
Schreibe einen Kommentar