Question

如何在扩展组件时更新react本机类的呈现？

我尝试使用在“第一个屏幕类”和作为应用程序shell的menu / navigator类中工作的setState，但是当我尝试在从其中调用的其他类中使用此函数时shell我得到了错误消息“警告：getInitialState是在...上定义的，一个简单的javascript类......”并且在尝试使用setState或forceUpdate消息“Warning forceUpdate / setState（依此类推）”时只能更新已挂载或安装组件。

是否有通过代码重新渲染的解决方案？

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class testClass extends React.Component {

    constructor(props) {
            super(props)
        }

    getInitialState() {
            return {
                isLoading: true,
                PackageNo: '',
                PackageNoSeq: '',
                hasError: false,
                errorMessage: '',
            };
        }

  render() {
    return (
      <View>
        <Text>Test</Text>
        <TouchableHighlight onPress={this.go.bind(this)}>
          <Text>Go to Apple</Text>
        </TouchableHighlight>
      </View>
    )
  }

  go() {
    console.log("go to other");
    this.props.navigator.push({ screen: 'OtherTest' });
  }
}

Answer 1

简单的亮点。 React.createClass是在React中声明/创建组件类的传统方法。 getInitialState是React.createClass生命周期方法之一，React团队刚刚发布了一个小的语法糖更新，以便更好地使用extends React.Component的ES6模块，它扩展了Component类而不是调用{ {1}}。

getInitialState函数已经死了，现在你需要在构造函数中将所有状态声明为一个简单的初始化属性

createClass

Answer 2

只需使用setState方法重新渲染即可。或者从父组件传递道具。

    import React, { Component, PropTypes } from 'react';
    import { View, Text, TouchableHighlight } from 'react-native';

    export default class testClass extends Component {
      state = {
        text: 'Go to Apple'
      }

      onPress = () => {
        this.setState({text: 'Go to hell'})
      }

      render() {
        return (
          <View>
            <Text>Test</Text>
            <TouchableHighlight onPress={this.onPress}>
              <Text>{this.state.text}</Text>
            </TouchableHighlight>
          </View>
        )
      }
    }

在扩展组件

2 个答案: