Question

每次设备旋转时，我都会更新宽度和高度值。我需要这个值来进行一些计算。这是我的代码

function wp (percentage) {
    const value = (percentage * this.state.viewportWidth) / 100;
    return Math.round(value);
}
const height = this.state.viewportHeight * 0.45; // I am getting the error here

export default class MyClass extends Component {

      onLayout(e) {
        this.updateLayout()
      }

      componentDidMount() {
        this.updateLayout()
      }

      updateLayout = () => {
        const {width, height} = Dimensions.get('window')
        this.setState({viewportWidth: width });
        this.setState({viewportHeight: height });
      }
}

我收到错误，告诉我this.state.viewportHeight是undefined。你对如何解决这个问题有任何想法吗？

Answer 1

如果要在组件外部使用viewportWidth，则将其作为参数传递给函数。

function wp (percentage, width) {
    const value = (percentage * width) / 100;
    return Math.round(value);
}

目前还不清楚您从代码中调用wp函数的位置，但如果您从组件内部调用它，则需要将其替换为wp(yourPercentageValue, this.state.viewportWidth)

你的高度计算只是漂浮在那里，所以你可以做同样的事情并用一个带视口的函数替换它

function hp（height）{ 返回高度* 0.45 }

然后，您可以在组件中调用hp(this.state.viewportHeight)。

状态，在反应中，是组件的状态，因此您永远不能在组件之外使用它。你可以将它传递给事物，无论是作为道具还是参数，这都是我上面所做的。

Answer 2

如果您的组件与尺寸保持同步，那么您可以直接通过以下方式引用这些尺寸：

Dimensions.get('window').width和 Dimensions.get('window').height

Answer 3

是的，您可以访问外部状态。您需要使用new关键字创建该类的实例

DoProcessing

在课堂外访问状态

3 个答案: