Question

我遇到了所需PropTypes投掷错误的问题。如果直接呈现PropType，我希望Component抛出错误。以下是我想要实现的一小部分样本。

您会注意到Button道具有所需的PropType句柄点击。

但我希望Modal的实现尽可能简单。由于我没有Modal的上下文，因此我无法将handleClick方法直接绑定到Button，因此我将Button作为子项传递给我，并映射到子项上子组件的handleClick方法。除了抛出Button的错误之外，这非常有效，因为<Button>在真正被渲染之前被调用和检查。

我尝试使用其他一些方法来使用高阶组件也可以。但是实现看起来很复杂而且乏味，这似乎是一种在需要时生成Modal的简单方法。你不需要在子组件中传递任何道具，它会添加点击处理程序。

绕过proptypes检查直到它实际呈现在Modal组件中，或者可能有更简单的方法，欢迎所有反馈，这将是非常棒的。

https://jsfiddle.net/kriscoulson/00xLw0up/1/

＆＃13;

var Button = (props) => 
  <button onClick={props.handleClick}>
    {props.children}
  </button>

Button.propTypes = {
  handleClick: React.PropTypes.func.isRequired
}

class Modal extends React.Component {
  openModal () { 
    console.log('Opening Modal.....')
  }
  childrenWithProps () {
    return React.Children.map(this.props.children,(child) =>           React.cloneElement(child, {
        handleClick: this.openModal
      })
    );
  }
  render () {
    return (
      <div>
	    {this.childrenWithProps()} 
      </div>
    );
  }
}

var App = () => 
  <Modal>
    <Button>Launch Modal</Button>
  </Modal>

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);

＆＃13;

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

React PropTypes何时初始化？

0 个答案: