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 服务器运行吗?

前端小白之每天学习记录----angula2--

基于angular的分页组件插件,使用directive,将directive的内容放到js文件中,直接引用即可

在 Angular 中,如何将组件转换为微服务?

具有多个子组件实例的Angular2父组件