如何从函数中调用组件

Question

I'm learning React Native and I got in an issue when I used TouchableOpacity .

I have in App.js component productHandler() method. I want onPress (when you click on Read More) to call Product component and to display it on the screen, but doesn't work.

When I click on Read More nothing happens.

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>
    );
  }
}

And this is the 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>
    );
  }
}

I learn in sandbox so this little code is here .

Answer 1

The issue is that you are not telling react where to render that component. The better way would be handle state and render based on the condition :

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>
    );
  }
}

Here is live demo: https://codesandbox.io/s/react-native-oln9t

Answer 2

You can't return a component from a click handler like that. Where would you even expect it to display in that case?

Instead, you need to keep some state, change that state on click, and then conditionally render the Product component based on that state.

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>
    );
  }
}