Question

我正在学习React Native，使用TouchableOpacity时遇到问题。

我在App.js组件中具有productHandler（）方法。我希望onPress（当您单击“更多信息”时）调用产品组件并将其显示在屏幕上，但是不起作用。

当我单击“阅读更多”时，没有任何反应。

class App extends Component {
  productHandler = () => {
    return <Product />;
  };
  render() {
    return (
      <View style={style.header}>
        <View style={style.touchableButtonContainer}>
          <TouchableOpacity
            style={style.touchableButton}
            onPress={this.productHandler}
          >
            <Text style={style.fontText}>Read More</Text>
          </TouchableOpacity>
        </View>
        <Text>This is just a text</Text>
      </View>
    );
  }
}

这是Product.js

class Product extends Component {
  render() {
    return (
      <View>
        <Text>Product page</Text>
        <Text>Product page</Text>
        <Text>Product page</Text>
        <Text>Product page</Text>
        <Text>Product page</Text>
        <Text>Product page</Text>
      </View>
    );
  }
}

我在沙箱中学习，所以这个小代码是here。

Answer 1

问题在于您没有告诉React在哪里渲染该组件。更好的方法是处理状态并根据条件进行渲染：

class App extends Component {
  state = {
    isActive: false
  };
  productHandler = () => {
    this.setState({ isActive: !this.state.isActive });
  };
  render() {
    return (
      <View style={style.header}>
        <View style={style.touchableButtonContainer}>
          <TouchableOpacity
            style={style.touchableButton}
            onPress={this.productHandler}
          >
            <Text style={style.fontText}>
              {this.state.isActive ? "Hide" : "Read More"}
            </Text>
          </TouchableOpacity>
        </View>
        {this.state.isActive && <Product />}
        {!this.state.isActive && <Text>This is just a text</Text>}
      </View>
    );
  }
}

这是现场演示：https://codesandbox.io/s/react-native-oln9t

Answer 2

您无法从这样的点击处理程序中返回组件。在这种情况下，您甚至希望它显示在哪里？

相反，您需要保留一些状态，在单击时更改该状态，然后根据该状态有条件地呈现Product组件。

class App extends Component {

  constructor() {
    this.state = { showingProduct: false }
    super()
  }

  productHandler = () => {
    this.setState({ showingProduct: true })
  };

  render() {
    return (
      <View style={style.header}>
        <View style={style.touchableButtonContainer}>
          <TouchableOpacity
            style={style.touchableButton}
            onPress={this.productHandler}
          >
            <Text style={style.fontText}>Read More</Text>
          </TouchableOpacity>

          { this.state.showingProduct && <Product /> }

        </View>
        <Text>This is just a text</Text>
      </View>
    );
  }
}

如何从函数中调用组件

2 个答案: