Question

我有一个DropDown组件：

function DropDown(props) {
    const classes = useStyles();
    const inputLabel = React.useRef(null);
    const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() => {
        if (inputLabel.current) {
            setLabelWidth(inputLabel.current.offsetWidth);
        }
    }, []);


    const handleValueChange = (e) => {  //FUTURE: combine the handlers  (or split out question types to sub-components)
        if (props.alternateChangeHandler) {
            props.alternateChangeHandler(props.currentEventID, props.qid, e.target.value);
        } else {
            props.SEQuestionValueChange(props.currentEventID, props.qid, e.target.value);
        }
    };

    //check for required info, return null if required elements are missing....
    if (!props.options) {
        // this occuring with fire an error from the propTypes checks... but at least this will keep it from crashing.
        return null;
    }

    return <FormControl className={classes.formControl} fullWidth={true}>
        {(props.label != null)
            ? <InputLabel ref={inputLabel} htmlFor={props.qid}>{props.label}</InputLabel>
            : null}
        <NativeSelect
            value={props.value}
            onChange={handleValueChange}
            inputProps={{
                name: props.label,
                qid: props.qid,
            }}
        >
            {props.includeBlank ? <option key="nada" value="" /> : null}
            {Object.keys(props.options).map((optionLabel, index) =>
                <option key={optionLabel} value={props.options[optionLabel]}>{optionLabel}</option>
            )}
        </NativeSelect>
        {/* <FormHelperText>Some important helper text</FormHelperText> */}
    </FormControl>

}

它是基于类的组件的子组件（实际上，DropDown是我整个树中唯一的功能组件）。

使用它时，出现以下警告：

index.js：1375警告：无法为功能组件提供引用。尝试访问此引用将失败。你是说要用 React.forwardRef（）？

检查Tooltip的渲染方法。在ConnectFunction中（在Question.js：78）....

父级（基于类）组件的render方法如下：

render() {

    let tooltip = this.props.helperText ? this.props.helperText : this.props.XMLTag;

    let withPaper = <Paper><DropDown {...this.props} /></Paper>

    let withToolTip = withPaper;

    if (tooltip != null) {
        withToolTip = <Tooltip title={tooltip} enterDelay={500} leaveDelay={200}>
            {withPaper}
            </Tooltip>
    }

return withToolTip ;
}

我可以做些什么以避免此警告消息？

尝试将功能组件用作子组件

0 个答案: