在React Native 0.27中未定义this.props

Question

我是React的新手，我已经实现了来自https://github.com/root-two/react-native-drawer

的react-native-drawer

我正面临一个问题，当我选择一个选项时会抛出错误

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的代码将此prop传递给它。

说你有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的父级应该将prop传递给它：

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