angular引用组件版本一定要相同吗
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular引用组件版本一定要相同吗相关的知识,希望对你有一定的参考价值。
参考技术A angular引用组件版本不一定要相同。版本不一定需要严格一致,但是建议使用node6.9.x和npm3.x.x以上的版本,以避免一些不必要的错误。ReactJS:React-Month-Picker错误:功能组件不能具有引用。您是要使用React.forwardRef()吗?
我使用"react": "^16.12.0"
版本,我制作了2个单独的屏幕,一个屏幕基于React组件,另一个屏幕基于功能。
如下所示,在基于React组件的屏幕月份选择器为我工作时,
import React, { Component } from 'react';
import {Button} from 'react-bootstrap';
import Picker from 'react-month-picker';
import 'react-month-picker/css/month-picker.css';
import MonthBox from './MonthPicker';
class OldScreen extends Component{
state = {
Durtn: "",
monthValue: {year: new Date().getFullYear(), month: (new Date().getMonth())},
FormatedMonth:"",
}
selectDuration(){
console.log("Generate")
// this.setState({Durtn: "Dur"});
}
handleClickMonthBox(e) {
this.refs.pickAMonth.show()
}
handleAMonthChange(year, month) {
let Dur = {year: year, month:month}
this.setState( {monthValue: Dur} )
}
handleAMonthDissmis(value) {
this.setState( {monthValue: value} )
}
render(){
const pickerLang = {
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
}
,mvalue = this.state.monthValue
let makeText = m => {
if (m && m.year && m.month) return (pickerLang.months[m.month-1] + '. ' + m.year)
return '?'
}
return(
<div style={{ padding:15}}>
<form>
<div className="form-row" style={{ paddingTop:20}}>
<div className="edit" style={{width:100,paddingLeft:10}}>
<Picker
ref="pickAMonth"
years={[2016, 2017, 2018, 2019, 2020, 2021,2022]}
value={mvalue}
lang={pickerLang.months}
onChange={this.handleAMonthChange.bind(this)}
onDismiss={this.handleAMonthDissmis.bind(this)}
>
<MonthBox value={makeText(mvalue)} onClick={this.handleClickMonthBox.bind(this)} />
</Picker>
</div>
</div>
</form>
</div>
)
}
}
export default OldScreen;
然后,我尝试使用基于React函数的同一屏幕,但出现此错误,
Error: Function components cannot have refs. Did you mean to use React.forwardRef()?
要解决此尝试问题,1.因为我使用的是16.12.0,所以我添加了import React, { useState, useRef } from 'react';
,但是在添加之后,我也遇到了错误TypeError: pickAMonth.show is not a function
下面的错误程序,
import React, { useState, useRef } from 'react';
import Picker from 'react-month-picker';
import 'react-month-picker/css/month-picker.css';
import MonthBox from './MonthPicker';
function NewScreen() {
const pickAMonth = useRef(null);
const pickerLang = {months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
const mvalue ={year: new Date().getFullYear(), month: (new Date().getMonth())}
let makeText = m => {if (m && m.year && m.month) return (pickerLang.months[m.month-1] + '. ' + m.year)
return '?'}
const handleAMonthChange=(e)=> {
}
const handleAMonthDissmis=(e)=> {
}
const handleClickMonthBox=(e)=> {
pickAMonth.show()
}
return (
<div style={{ padding:15}}>
<form>
<div className="form-row" style={{ paddingTop:20}}>
<div className="edit" style={{width:100,paddingLeft:10}}>
<Picker
ref={pickAMonth}
years={[2016, 2017, 2018, 2019, 2020, 2021,2022]}
value={mvalue}
lang={pickerLang.months}
onChange={handleAMonthChange}
onDismiss={handleAMonthDissmis}
>
<MonthBox value={makeText(mvalue)} onClick={handleClickMonthBox} />
</Picker>
</div>
</div>
</form>
</div>
);
}
export default NewScreen;
提前感谢您的时间!
答案
在功能组件中ref在'current'属性中具有其值
const handleClickMonthBox=(e)=> {
pickAMonth.**current**.show()
}
另一答案
要在反应中使用ref,您需要将回调传递给组件中的ref
dont
ref="pickAMonth"
// or
ref={pickAMonth}
do
ref = {(componentRef) => refVariable = componentRef
}
ref = {ref => pickAMonth = ref}
// somwhere in your code, now you can do this
pickAMonth.show();
以上是关于angular引用组件版本一定要相同吗的主要内容,如果未能解决你的问题,请参考以下文章
ReactJS:React-Month-Picker错误:功能组件不能具有引用。您是要使用React.forwardRef()吗?
angular2 必须使用 nodejs,我可以使用 apache 服务器运行吗?