Javascript 不渲染组件onClick

我尝试渲染的组件：

import React, { Component } from 'react';

export default class QueryPrint extends Component {

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

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

import React，{Component}来自'React'；
导出默认类QueryPrint扩展组件{
render（）{
console.log（'working'）；
返回(
你好
)
}

}

尝试调用它的组件：

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
进口{
按钮
}来自“反应带”；
从“/bq_print”导入查询打印；
类QueryResults扩展组件{
建造师（道具）{
超级（道具）；
this.print=this.print.bind（this）；
}
打印（）{
console.log（'Clicked'）；
返回(
);
}
render（）{
返回(
印刷品
)
}
}
函数MapStateTops（状态）{
返回{
查询\u数据：state.results.query\u数据
}
}
导出默认连接（MapStateTops，null）（QueryResults）；

---

console.log（'clicked'）

正在工作，但应该在该方法中呈现的组件不工作--no

console.log（'working'）

或

从单击回调返回内容无效。如果要渲染某些内容，请在“渲染”方法中执行此操作。单击回调的任务是调用此.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>
    )
  }
}

类QueryResults扩展组件{
建造师（道具）{
超级（道具）；
this.print=this.print.bind（this）；
此.state={
queryPrint:false，
}
}
打印（）{
console.log（'Clicked'）；
this.setState（{queryPrint:true}）
}
render（）{
const{queryPrint}=this.state；
返回(
{queryPrint&&}
印刷品
)
}
}

React Native的工作原理不同。它更像一个web应用程序-您需要导航到其他组件

看看这个例子，它非常切题：

或者，如果只想对屏幕进行部分更改，则需要将其包含到自己的渲染中，并通过标志或状态机对其进行控制

我相信

render（）

只有在连接到DOM且可见时才会激发

onClick（）

只定义事件处理程序，它不进行任何此类呈现。最快（不是最好）的解决方案可能是让print（）返回

ReactDOM.render（，document.getElementById（'someidtoputit'）

。