不呈現組件onClick

Question

我正在嘗試渲染的組件：

import React, { Component } from 'react';

export default class QueryPrint extends Component {

    render() {
        console.log('working');

        return (
            <div>Hello</div>
        )
    }

}

試圖調用它的組件：

import React, { Component } from 'react';
import { connect } from 'react-redux';

import {
    Button,

} from 'reactstrap';

import QueryPrint from './bq_print';

class QueryResults extends Component {
    constructor(props) {
        super(props);
        this.print = this.print.bind(this);
    }

    print() {
        console.log('Clicked');
        return (
            <QueryPrint />
        );
    }

    render() {
        return (
            <Button 
                className='cuts-btn' 
                color='success' 
                onClick={this.print}
            >
                Print
            </Button>
        )
    }
}

function mapStateToProps(state) {
    return {
        query_data: state.results.query_data
    }
}

export default connect (mapStateToProps, null)(QueryResults);

console.log('clicked')正在工作，但是應該在該方法中呈現的組件不起作用-沒有console.log('working')或<div> 。

Answer 1

從點擊回調中返回內容無效。 如果要渲染某些東西，可以在render方法中進行。 點擊回調的工作是調用this.setState（），然后將開始渲染。

也許是這樣的：

class QueryResults extends Component {
  constructor(props) {
    super(props);
    this.print = this.print.bind(this);
    this.state = {
      queryPrint: false,
    }
  }

  print() {
    console.log('Clicked');
    this.setState({ queryPrint: true })
  }

  render() {
    const { queryPrint } = this.state;
    return (
      <React.Fragment>
        {queryPrint && <QueryPrint />}
        <Button 
          className='cuts-btn' 
          color='success' 
          onClick={this.print}
        >
          Print
        </Button>
      </React.Fragment>
    )
  }
}

Answer 2

React Native的工作方式有所不同。 它更像一個Web應用程序-您需要導航到其他組件。

仔細看這個例子： https : //facebook.github.io/react-native/docs/navigation

另外，如果您只想進行部分屏幕更改，則需要將其包含在自己的渲染中，並通過標志或狀態機對其進行控制。

https://facebook.github.io/react-native/docs/direct-manipulation