reactjs - React - 将 refs 作为 prop 传递

Question

我正在尝试使用 React 来管理复选框。以下代码运行良好，但我想重构 render 方法中的代码，以便它使用 Component。我想将引用传递给该组件，但我不知道该怎么做。

export default class AreRefsAwesomeCheckbox extends Component {
    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange() {
        let data = {
            isFeatured: this.refs.check_me.checked
        };
        postJSON('/some/url', data);
    }


    componentDidMount() {
        const data = getJSON('/some/url');
        data.then(object => {
                this.refs.check_me.checked = object.will_i_have_a_nice_checkbox;
            }
        )
    }

    render() {
        return (
            <div>
                <label>
                    <input ref="check_me" type="checkbox" 
                           onChange={this.handleInputChange}/>
                    <div>Are refs good?</div>
                </label>

            </div>
        );
    }
}

我正在考虑这样的事情

const Checkbox = ({myRef, changeInput, checkboxText}) => {
    return (
        <label>
            <input type="checkbox" ref={myRef} onChange={(event) => changeInput(event)}/>
            <div> {checkboxText} </div>
        </label>)
};

然后将此代码片段放入渲染方法中

<Checkbox myRef="check_me" changeInput={this.handleInputChange} checkboxText="Are refs good?"/>

这显然行不通。我该怎么做呢？

Answer 1

使用createRef或useRef创建您最终传递的引用。

如果您要将引用传递给函数组件，请使用 React.forwardRef .

如果您将 ref 传递给类组件，请确保 prop 名称是除 ref 之外的任何名称，否则您将得到 special prop警告。