无法设置从父母的儿童道具

Question

我正在尝试使用lightbox的src。该代码似乎不适用于最新版本的反应。无法为LightboxTrigger组件中的父组件设置子项道具。

使用反应0.12的工作示例。 example

var LightboxModal = React.createClass({ 

    whiteContentStyles: { 
     position: 'fixed', 
     top: '25%', 
     left: '30%', 
     right: '30%', 
     backgroundColor: '#fff', 
     color: '#7F7F7F', 
     padding: '20px', 
     border: '2px solid #ccc', 
     borderRadius: '20px', 
     boxShadow: '0 1px 5px #333', 
     zIndex:'101' 
    }, 

    blackOverlayStyles: { 
     background: 'black', 
     opacity: '.5', 
     position: 'fixed', 
     top: '0px', 
     bottom: '0px', 
     left: '0px', 
     right: '0px', 
     zIndex: '100' 
    }, 

    closeTagStyles: { 
     float: 'right', 
     marginTop: '-30px', 
     marginRight: '-30px', 
     cursor: 'pointer', 
     color: '#fff', 
     border: '1px solid #AEAEAE', 
     borderRadius: '30px', 
     background: '#605F61', 
     fontSize: '31px', 
     fontWeight: 'bold', 
     display: 'inline-block', 
     lineHeight: '0px', 
     padding: '11px 3px', 
     textDecoration: 'none' 
    }, 

    componentDidMount: function(){ 
     document.addEventListener("keydown", function (e) { 
      if ((this.props.display) && (e.keyCode === 27)){ 
       this.props.closeLightbox(); 
      } 
     }.bind(this)); 
    }, 

    render: function(){ 
     for (var j in this.props){ 
      if (j !== 'children'){ 
       this.props.children.props[j] = this.props[j]; 
      } 
     } 

     if (this.props.display){ 
      return (
       <div> 
        <div style={this.blackOverlayStyles} onClick={this.props.closeLightbox} /> 
        <div style={this.whiteContentStyles}> 
         <a style={this.closeTagStyles} onClick={this.props.closeLightbox}>&times;</a> 
         {this.props.children} 
        </div> 
       </div> 
      ); 
     } else { 
      return (<div></div>); 
     } 
    } 
}); 


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

     this.props.children.props.onClick = this.props.openLightbox; 
     for (var j in this.props){ 
      if (j !== 'children'){ 
       this.props.children.props[j] = this.props[j]; 
      } 
     } 
     return this.props.children; 
    } 
}); 


var Lightbox = React.createClass({ 

    getInitialState: function(){ 
     return { display: false }; 
    }, 

    componentWillMount: function(){ 
     if (this.props.data) 
      this.setState(this.props.data); 
    }, 

    openLightbox: function(){ 
     this.setState({display: true}); 
    }, 

    closeLightbox: function(){ 
     this.setState({display: false}); 
    }, 

    setLightboxState: function(obj){ 
     this.setState(obj); 
    }, 

    render: function(){ 
     var childrenWithProps = React.Children.map(this.props.children, function(child) { 
      var childProps = { 
       openLightbox: this.openLightbox, 
       closeLightbox: this.closeLightbox, 
       setLightboxState: this.setLightboxState 
      }; 
      console.log(childProps) 
      for (var j in this.state){ 
       childProps[j] = this.state[j]; 
      } 

      var childWithProps = React.cloneElement(child, childProps); 

      return childWithProps; 
     }, this); 

     return (
      <div> 
       {childrenWithProps} 
      </div> 
     ); 
    } 
}); 

我正在渲染这个在dom中。

<Lightbox> 
    <LightboxTrigger> 
     <a href="#">Click to open</a> 
    </LightboxTrigger> 
    <LightboxModal> 
     <div> 
      <h1>This is the basic usage!</h1> 
      <p>Good luck :D</p> 
     </div> 
    </LightboxModal> 
</Lightbox> 

Answer 1

如果您使用的是React 14或更高版本，则道具对象现在被冻结并且不能被突变。您可以使用React.cloneElement替代。

您可以了解这种变化here和React.CloneElement here