Question

我在我的React 0.13 App上使用了一个subrender方法（在helpers方法中分解了react组件）。但是我收到了一个错误：

不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在向未在组件的render方法
中创建的组件添加引用

那么，如何管理我的动态创建反应依赖于DOM的组件以避免使我的主渲染方法变胖？

如何重构0.14 React版本中的新方法？

module.exports = React.createClass({
displayName: 'Typed',
render: function() {
    var _this = this;

    return (
      React.createElement("div", {
            style: {
                position: 'relative'
            },
            className: 'react-typeahead-container ' + _this.props.className},
        _this._renderInput(),
        _this._renderDropdown(),
        _this._renderAriaMessageForOptions(),
        _this._renderAriaMessageForIncomingOptions()
      )
    );
},
_renderInput: function() {
    var _this = this,
        state = _this.state,
        props = _this.props,
        inputValue = props.inputValue,
        inputValue = props.inputValue,
        className = 'react-typeahead-input',
        inputDirection = getTextDirection(inputValue);

    return (
        React.createElement("div", {
            style: {
                position: 'relative'
            },
            className: "react-typeahead-input-container"},
            React.createElement(Input, {
                ref: "input", //this does not works :(
                role: "combobox"
            )
        )
    );
},

Answer 1

根据我的理解，ref应该是一个接收引用元素的回调方法。在这种情况下，input。然后，您可以将其存储在state或其他人中并引用它。当它有效时，引用的DOM节点将被渲染。

Answer 2

作为this JSFiddle shows，上面的代码可以工作（稍微修改一下，以便按照书面形式运行）。有一个小的语法错误;包含属性的对象缺少一个结束大括号：

React.createElement(Input, {
    ref: "input", //this does not works :(
    role: "combobox"
) // <-- should be })

Refs如何处理反应0.14

2 个答案: