[英]Not rendering component 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')
正在工作,但是应该在该方法中呈现的组件不起作用-没有console.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>
)
}
}
React Native的工作方式有所不同。 它更像一个Web应用程序-您需要导航到其他组件。
仔细看这个例子: https : //facebook.github.io/react-native/docs/navigation
另外,如果您只想进行部分屏幕更改,则需要将其包含在自己的渲染中,并通过标志或状态机对其进行控制。
https://facebook.github.io/react-native/docs/direct-manipulation
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.