Question

我有一个'OutputBox'组件，并且想要更改当我单击按钮时在该组件中显示的文本。

我已经读过有关道具和状态的资料，我似乎也无法按照我需要的方式来使它们工作。我刚开始使用react-native并拥有大量的c ++背景知识。我以为我可以在“ OutputBox”组件中声明一个变量“ text”，然后调用“ setOutputBoxText”函数并更改“ text” var。 Getters和Setters范例。我只是无法解决如何使用props“传递args”到组件之类的事情。

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "flex-end" }}>
        <CustomButton 
          text="N"
          onPress={() => {
            OutputBox.setOutputBox('You head North');
            alert("You head North");
          }}
        />
         <OutputBox></OutputBox>
      </View>
    );
  }
}

class CustomButton extends Component {
    render() {
        const { text, onPress} = this.props;
        return (
          <TouchableOpacity style={styles.buttonStyle}
            onPress={() => onPress()}
          >
             <Text style={styles.textStyle}>{text}</Text>
          </TouchableOpacity>
        );
    }
}

class OutputBox extends Component {
  constructor( props ) {
    super( props );
    var displayText = 'Hello Traveller';
  }
  setOutputBox( newText ){
    displayText = newText;
  }
  render() {
    return (
      <View style={ styles.outputBox }>
        <Text>{this.displayText}</Text>
      </View>
    );
  }
}

我希望能够做一些与我现有的类似的事情，但是我只是不断得到typeError: OutputBox.setOutputBox不是一个函数。我知道这是本机反应的错误范例。我似乎无法用道具和状态来做这样的事情。

更新：我不再收到错误typeError: OutputBox.setOutputBox is not a function。现在，OutputBox仅不显示任何内容。如何获得<Text/>的{{1}}组件进行更改和显示。

Answer 1

这是正确的方法。

export default class HelloWorldApp extends Component {
      constructor( props ) {
         super( props );
        this.state={
          displayText : 'Hello Traveller',
          }
  }

      render() {
        return (
          <View style={{ flex: 1, alignItems: "flex-end" }}>
            <CustomButton 
              text="N"
              onPress={() => {
                this.setState({displayText:'You head North'})
              }}
            />
             <OutputBox text={this.state.displayText}/>
          </View>
        );
      }
    }

class CustomButton extends Component {
        render() {
            const { text, onPress} = this.props;
            return (
              <TouchableOpacity style={styles.buttonStyle}
                onPress={() => onPress()}
              >
                 <Text style={styles.textStyle}>{text}</Text>
              </TouchableOpacity>
            );
        }
    }

    class OutputBox extends Component {
      render() {
        return (
          <View style={ styles.outputBox }>
            <Text>{this.props.displayText}</Text>
          </View>
        );
      }
  }

Answer 2

我刚刚删除了OutputBox组件，并在其中放置了<Text>组件。我意识到我不需要OutputBox组件，因为它的唯一目的是显示文本。这就是我最终得到的

export default class HelloWorldApp extends Component {
      constructor( props ) {
         super( props );
        this.state={
          displayText : 'Hello Traveller',
          }
  }

      render() {
        return (
          <View style={{ flex: 1, alignItems: "flex-end" }}>
            <CustomButton 
              text="N"
              onPress={() => {
                this.setState({displayText:'You head North'})
              }}
            />
             <Text>{this.state.displayText}</Text>
          </View>
        );
      }
    }

class CustomButton extends Component {
        render() {
            const { text, onPress} = this.props;
            return (
              <TouchableOpacity style={styles.buttonStyle}
                onPress={() => onPress()}
              >
                 <Text style={styles.textStyle}>{text}</Text>
              </TouchableOpacity>
            );
        }
    }

如何在react-native的同级组件中更改文本？

2 个答案: