如何在 react-native 中更改兄弟组件中的文本？答案

【问题标题】：How to change text in sibling component in react-native?如何在 react-native 中更改兄弟组件中的文本？
【发布时间】：2019-04-18 17:17:26
【问题描述】：

我有一个“输出框”组件，并希望在单击按钮时更改组件中显示的文本。

我已经阅读了有关道具和状态的信息，但我似乎无法让它们按照我需要的方式工作。我刚开始 react-native 并且有丰富的 c++ 背景。我想我可以在“OutputBox”组件中声明一个变量“text”，然后调用“setOutputBoxText”函数并更改“text”变量。 Getter 和 Setter 范式。我只是想不通如何使用道具将参数“传递”给组件等。

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 不是一个函数。我知道这是 react-native 的错误范例。我似乎无法用道具和状态来做这样的事情。

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

【问题讨论】：

hmmm，如果我将alert 放入并将其设置为this.props.displayText，这似乎不会在OutputBox 中显示任何内容，它会更改，但这仍然不起作用用于更改OutputText 的文本。

标签： react-native

【解决方案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>
        );
      }
  }

【讨论】：

我接受了答案，因为它是正确的，但是我的代码错误并最终删除了我的 OutputBox 组件并将其替换为 <Text> 组件。感谢您的帮助！

【解决方案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>
            );
        }
    }

【讨论】：