Как визуализировать JSX-компонент из функции покажи, что он отображается на экране - PullRequest
Новая
       50

Как визуализировать JSX-компонент из функции покажи, что он отображается на экране

2 голосов
/ 19 июня 2019

Как отобразить компонент JSX из функции, чтобы показать его на экране.

Ниже приведен код, который не отображает компонент функции JSX ... 

export default class HomeScreen extends Component{
  state = {
      isVisible:false
  }
  modal = ()=>{
    return(<Text>Hello world</Text>);
  }
  render(){
    return(
        <View>
          <Button onPress={this.setState({isVisible:true})}>Click me</Button>
          {this.state.isVisible?this.modal:null}
        </View>
    );
  }
}

И этот код ниже работает правильно, поэтому я хочу знать, что является ошибкой в ​​первом. 

export default class HomeScreen extends Component{
  state = {
      isVisible:false
  }
  modal = ()=>{
    return(<Text>Hello world</Text>);
  }
  render(){
    return(
        <View>
          <Button onPress={this.setState({isVisible:true})}>Click me</Button>
          {this.state.isVisible?<Text>Hello world</Text>:null}
        </View>
    );
  }
}

Итак, скажите, пожалуйста, в первом случае, что является проблемой, из-за которой текст hello world не рендерится через компонент JSX, возвращаемый из модальной функции.

Ответы [ 2 ]

3 голосов
/ 19 июня 2019

Потому что ты никогда не звонил this.modal Ты должен позвонить.this.modal() Это функция, которую нужно вызвать.Никаких проблем не бывает. ?

1 голос
/ 19 июня 2019

Первая проблема заключается в том, что вы не выполняете модальную функцию.

Во-вторых, вы вызываете функцию onPress и не передаете ссылку на функцию, оборачиваете ее внутри arrow function onPress={() => this.setState({ isVisible: true })}

Я предложу извлечь Modal в новый компонент и включать его только тогда, когда state.isVisible равен true

const Modal = () => <h3>Modal</h3>;

export default class HomeScreen extends Component {
  state = {
    isVisible: false
  }

  render() {
    return (
      <View>
        <Button onPress={() => this.setState({ isVisible: true })}>Click me</Button>
        {this.state.isVisible && <Modal />}
      </View>
    );
  }
}
...