this.props未定義從<a href="https://github.com/root-two/react-native-drawer" rel="nofollow">https://github.com/root-two/react-native-drawer</a></p> <p>陣營本地0.27

Question

我是新來反應過來，就已經實現了反應母語抽屜我面臨的一個問題，當我選擇一個選項，它會引發以下錯誤

Image Showing error

我的代碼是：

在的MainView類：

setParentState(args) 
{ 
    this.props.setParentState(args); 
} 

在點擊時拋出此錯誤：

<Switch 
      onValueChange={this.setParentState.bind(this, {drawerType:'overlay'})} 
      style={styles.rowInput} 
      disabled={this.props.drawerType === 'overlay'} 
      value={this.props.drawerType === 'overlay'} /> 

以下是我的類代碼：

class MainView extends Component { 


     setParentState(args) 
     { 
     this.props.setParentState(args); 
     } 

     render(){ 
    return (
     <ScrollView 
     pointerEvents="box-none" 
     style={styles.scrollView} 
     scrollEventThrottle={200} 
     contentInset={{top: 0}} 
     > 
     <View style={styles.container}> 
      <Text style={styles.welcome}> 
      Drawer Configuration 
      </Text> 

      <Button 
      onPress={this.props.openDrawer} 
      text="Open Drawer" 
      /> 
      <Button 
       onPress={this.props.noopChange} 
       text="noopChange" 
       /> 

      {/*type*/} 
      <Text style={styles.categoryLabel}>Drawer Type</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Overlay</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {drawerType:'overlay'})} 
       style={styles.rowInput} 
       disabled={this.props.drawerType === 'overlay'} 
       value={this.props.drawerType === 'overlay'} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Displace</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {drawerType:'displace'})} 
       style={styles.rowInput} 
       disabled={this.props.drawerType === 'displace'} 
       value={this.props.drawerType === 'displace'} /> 
      </View> 
      <View style={styles.lastRow}> 
      <Text style={styles.rowLabel}>Static</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {drawerType:'static'})} 
       style={styles.rowInput} 
       disabled={this.props.drawerType === 'static'} 
       value={this.props.drawerType === 'static'} /> 
      </View> 

      {/*trigger options*/} 
      <Text style={styles.categoryLabel}>Trigger Options</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>relativeDrag</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'relativeDrag': value})} } 
       style={styles.rowInput} 
       value={this.props.relativeDrag} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>panStartCompensation</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'panStartCompensation': value})} } 
       style={styles.rowInput} 
       value={this.props.panStartCompensation} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>disabled</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'disabled': value})} } 
       style={styles.rowInput} 
       value={this.props.disabled} /> 
      </View> 
      <View style={styles.row}> 
         <Text style={styles.rowLabel}>openDrawerThreshold</Text> 
         <SliderJS 
           style={styles.slider} 
           trackStyle={sliderStyles.track} 
        thumbStyle={sliderStyles.thumb} 
        minimumTrackTintColor={minimumTrackTintColor} 
        maximumTrackTintColor={maximumTrackTintColor} 
           thumbTintColor={thumbTintColor} 
        maximumValue={.5} 
        value={this.props.closedDrawerOffset} 
        onSlidingComplete={(value) => { 
         this.setParentState({openDrawerThreshold: value}) 
        }} 
          /> 
      <Text style={styles.sliderMetric}>{Math.round(this.props.openDrawerThreshold*100)}%</Text> 
      </View> 

      {/*tween presets*/} 
      <Text style={styles.categoryLabel}>Example Tweens</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>None</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenHandlerPreset:null})} 
       style={styles.rowInput} 
       disabled={this.props.tweenHandlerPreset === null} 
       value={this.props.tweenHandlerPreset === null} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Material Design</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenHandlerPreset:'material'})} 
       style={styles.rowInput} 
       disabled={this.props.tweenHandlerPreset === 'material'} 
       value={this.props.tweenHandlerPreset === 'material'} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Rotate</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenHandlerPreset:'rotate'})} 
       style={styles.rowInput} 
       disabled={this.props.tweenHandlerPreset === 'rotate'} 
       value={this.props.tweenHandlerPreset === 'rotate'} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Parallax</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenHandlerPreset:'parallax'})} 
       style={styles.rowInput} 
       disabled={this.props.tweenHandlerPreset === 'parallax'} 
       value={this.props.tweenHandlerPreset === 'parallax'} /> 
      </View> 

      {/*animation*/} 
      <Text style={styles.categoryLabel}>tweenEasing</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>linear</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenEasing:'linear'})} 
       style={styles.rowInput} 
       disabled={this.props.tweenEasing === 'linear'} 
       value={this.props.tweenEasing === 'linear'} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>easeOutQuad</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenEasing:'easeOutQuad'})} 
       style={styles.rowInput} 
       disabled={this.props.tweenEasing === 'easeOutQuad'} 
       value={this.props.tweenEasing === 'easeOutQuad'} /> 
      </View> 
      <View style={styles.lastRow}> 
      <Text style={styles.rowLabel}>easeOutElastic</Text> 
      <Switch 
       onValueChange={this.setParentState.bind(this, {tweenEasing:'easeOutElastic'})} 
       style={styles.rowInput} 
       disabled={this.props.tweenEasing === 'easeOutElastic'} 
       value={this.props.tweenEasing === 'easeOutElastic'} /> 
      </View> 

      {/*offsets*/} 
      <Text style={styles.categoryLabel}>Offsets</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>openDrawerOffset</Text> 
      <SliderJS 
       style={styles.slider} 
          trackStyle={sliderStyles.track} 
          thumbStyle={sliderStyles.thumb} 
          minimumTrackTintColor={minimumTrackTintColor} 
          maximumTrackTintColor={maximumTrackTintColor} 
          thumbTintColor={thumbTintColor} 
       maximumValue={.5} 
       value={this.props.openDrawerOffset} 
       onSlidingComplete={(value) => { 
        this.setParentState({openDrawerOffset: parseFloat(value)}) 
       }} 
       /> 
       <Text style={styles.sliderMetric}>{Math.round(this.props.openDrawerOffset*100)}%</Text> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>closedDrawerOffset</Text> 
      <SliderJS 
       style={styles.slider} 
          trackStyle={sliderStyles.track} 
          thumbStyle={sliderStyles.thumb} 
          minimumTrackTintColor={minimumTrackTintColor} 
          maximumTrackTintColor={maximumTrackTintColor} 
          thumbTintColor={thumbTintColor} 
       maximumValue={.5} 
       value={this.props.closedDrawerOffset} 
       onSlidingComplete={(value) => { 
        this.setParentState({closedDrawerOffset: parseFloat(value)}) 
       }} 
       /> 
       <Text style={styles.sliderMetric}>{Math.round(this.props.closedDrawerOffset*100)}%</Text> 
      </View> 

      {/*pan mask*/} 
      <Text style={styles.categoryLabel}>Pan Mask</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>panOpenMask</Text> 
      <SliderJS 
       style={styles.slider} 
          trackStyle={sliderStyles.track} 
          thumbStyle={sliderStyles.thumb} 
          minimumTrackTintColor={minimumTrackTintColor} 
          maximumTrackTintColor={maximumTrackTintColor} 
          thumbTintColor={thumbTintColor} 
       maximumValue={1} 
       value={this.props.panOpenMask} 
       onSlidingComplete={(value) => { 
        this.setParentState({panOpenMask: value}) 
       }} 
       /> 
       <Text style={styles.sliderMetric}>{Math.round(this.props.panOpenMask*100)}%</Text> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>panCloseMask</Text> 
      <SliderJS 
       style={styles.slider} 
          trackStyle={sliderStyles.track} 
          thumbStyle={sliderStyles.thumb} 
          minimumTrackTintColor={minimumTrackTintColor} 
          maximumTrackTintColor={maximumTrackTintColor} 
          thumbTintColor={thumbTintColor} 
       maximumValue={1} 
       value={this.props.panCloseMask} 
       onSlidingComplete={(value) => { 
        this.setParentState({panCloseMask: value}) 
       }} 
       /> 
       <Text style={styles.sliderMetric}>{Math.round(this.props.panCloseMask*100)}%</Text> 
      </View> 

      {/*others*/} 
      <Text style={styles.categoryLabel}>Others</Text> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Accept Tap</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'acceptTap': value})} } 
       style={styles.rowInput} 
       value={this.props.acceptTap} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Accept Double Tap</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'acceptDoubleTap': value})} } 
       style={styles.rowInput} 
       value={this.props.acceptDoubleTap} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Accept Pan</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'acceptPan': value})} } 
       style={styles.rowInput} 
       value={this.props.acceptPan} /> 
      </View> 
      <View style={styles.row}> 
      <Text style={styles.rowLabel}>Right Side (not hot changeable)</Text> 
      <Switch 
       onValueChange={ (value) => { this.setParentState({'rightSide': value})} } 
       style={styles.rowInput} 
       disabled={true} 
       value={this.props.rightSide} /> 
      </View> 
     </View> 
     </ScrollView> 
    ) 
    } 
} 

三江源提前。

Answer 1

這不是一個函數，因爲您需要調用MainView的代碼將該通道傳遞給它。

說你擁有的MainView

export default class MainView extends Component { 

    setParentState() { 
     this.props.setParentState(args); //This should come from parent view 
    } 
    render() { 
     return (
      <Switch 
       onValueChange={this.setParentState.bind(this, {drawerType:'overlay'})} 
       style={styles.rowInput} 
       disabled={this.props.drawerType === 'overlay'} 
       value={this.props.drawerType === 'overlay'} /> 
     ) 
    } 
} 

的MainView的家長應道具給它：

export default class Parent extends Component { 
    constructor() { 
     super(props); 
     this.setParentStateHandler = this.setParentStateHandler.bind(this); 
    } 
    setParentStateHandler() { 
     //Your handling code here 
    } 
    render() { 
     return (
      <MainView setParentState={this.setParentStateHandler} /> 
     ) 
    } 
}