React'ta iç içe şekil için varsayılan sahne nasıl sağlanır?

Question

Belirli bir şekildeki iç içe geçmiş öğeler dizisine varsayılan sahne sağlamak için React'ta bir yol var mı? Aşağıdaki örnekte Verilen

, benim ilk girişim beklendiği gibi ancak bu işe yaramazsa, görülebilir. Bu örnekte

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 - ', 
    }], 
}; 

, aşağıdaki beklenebilir:

// 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 - ' }, 
    ] 
}; 

Answer 1

sayılı Varsayılan sahne sadece sığ birleştirilir. Bununla birlikte, bir yaklaşım her bir öğe için bir Çocuk bileşenine sahip olmak olabilir. Bu şekilde her çocuk bileşeni item diziden bir nesne alır ve beklediğiniz gibi varsayılan sahne birleştirilecek. Örneğin

:

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

});