javascript - 不渲染组件 onClick
问题描述
我要渲染的组件:
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')
正在工作,但是应该在该方法中呈现的组件没有--noconsole.log('working')
或<div>
.
解决方案
从点击回调返回一些东西没有效果。如果你想渲染一些东西,你可以在 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>
)
}
}
推荐阅读
- google-cloud-platform - 将网站转移到 Google Cloud 托管;我们可以在转移过程中使用子域吗?
- reactjs - 在 React 的 get Request 中使用 formData 参数获取数据
- python-3.x - 正则表达式 - 计算单词中大写字母的数量
- apollo - 如何从显式多对多表中返回数据?
- python-3.x - SKLearn 1.0 版中的警告“有效功能名称”
- django - Django heroku 图片问题
- python - 在微积分中挣扎:这两种 python 算法的时间复杂度是多少?
- ruby - Ruby - 我希望代码只在特定条件下工作,但不知道该怎么做
- python - request.get_json() 总是 NoneType
- python - 更改 ttk.combobox 下拉窗口的字体大小