时间戳

首页 > 解决方案 > 如何访问渲染中构造函数中定义的 react-natve 变量？

javascript - 如何访问渲染中构造函数中定义的 react-natve 变量？

问题描述

我是新来的反应原生并面临定义/访问变量的问题我所做的是

  export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    const unit = [
      {label: 'mm', value: 'mm'},
      {label: 'cm', value: 'cm'},
      {label: 'meters', value: 'm'},
      {label: 'km', value: 'km'},
      {label: 'inches', value: 'in'},
      {label: 'feet', value: 'ft'},
      {label: 'yards', value: 'yd'},
      {label: 'miles', value: 'mi'},
      {label: 'nautical miles', value: 'nmi'},
    ];
    var selectedValue = 'mm';
  }

  render() {
    return (
      <View style={styles.screen}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <View style={styles.rowContainer}>
              <Text style={styles.text}>Scale Ratio </Text>
              <TextInput style={styles.textInput}>1</TextInput>
              <TextInput style={styles.textInput}>12</TextInput>
            </View>
            <View style={styles.rowContainer}>
              <Text style={styles.text}>Real Length </Text>
              <TextInput style={styles.textInput}>120</TextInput>
              {/* <TextInput style={styles.textInput}>mm</TextInput> */}
              <View style={styles.container}>
                <Picker
                  selectedValue={selectedValue}
                  style={{height: 50, width: 150}}
                  onValueChange={(itemValue, itemIndex) =>
                    setSelectedValue(itemValue)
                  }>
                  {unit.map(item => (
                    <Picker.Item label={item.label} value={item.value} />
                  ))}
                </Picker>
                {/* <RNPickerSelect
                style={styles.textInput}
                onValueChange={value => console.log(value)}
                items={this.unit}
              /> */}
              </View>
            </View>
            <View style={styles.rowContainer}>
              <Text style={styles.text}>Scale Length </Text>
              <TextInput style={styles.textInput}>10</TextInput>
              <TextInput style={styles.textInput}>mm</TextInput>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

但我收到错误

在此处输入图像描述

我无法同时访问unit和selectedValue

标签： javascriptreactjsreact-nativeecmascript-6

解决方案

JavaScript方式（本）

将其保存到this对象（构造函数创建并返回它）。

/* inside of constructor */
this.selectedValue = 'mm';
/* outside of constructor, but inside of class mthods*/
console.log(this.selectedValue); // 'mm'
this.selectedValue = 'qq';

JavaScript方式（静态变量）

将其保存为静态变量，该变量将在类外可用。

/* inside of constructor */
HomeScreen.selectedValue = 'mm';
/* outside of constructor, inside AND outside of class*/
console.log(HomeScreen.selectedValue); // 'mm'
HomeScreen.selectedValue = 'qq';

JavaScript方式（闭包）

ps这是可能的，但不推荐（根本不安全）

您可以将变量声明提升到课堂之外。在这种情况下，所有类内部都可以从闭包中获取变量并读取/重写该变量。

反应方式（状态）

如果您想在更改变量时看到 UI 更新，则必须使用响应式方式（更改订阅）。Reacts 为它提供了props和state. 如果你想处理内部反应类变量，你应该使用state. 在这种情况下，每次更改状态时，您的 React 都会调用类render()方法。

/* inside of constructor */
this.state = { selectedValue: 'mm' };
/* outside of constructor, inside of class methods */
console.log(this.state.selectedValue); // 'mm'
this.setState({ selectedValue: 'qq' });

使用 setState 提示

方法this.setState是异步的，React 以异步方式处理此方法，以进行一些优化，将许多更新批处理在一起。

所以如果你在类方法中有这样的代码，你可能会得到下面的结果。（更新不是即时的）

this.setState({ selectedValue: 'qq' });
console.log(this.state.selectedValue) // 'mm'

但是您的render()方法将正确处理它。

render() {
  console.log(this.state.selectedValue); // 'qq'
  /* ... */
}

推荐阅读