Javascript 如何使用'；这'；在defaultProps中React.Component类语法？

在过去，我可以设置一个默认的道具，像这样使用

这个

let MyButton = React.createClass({
    getDefaultProps() {
        return {
            buttonRef: (ref) => this.button = ref
        };
    },

但是现在我正在使用JS类

MyButton

看起来像这样

class MyButton extends React.Component {
    static defaultProps = {
        buttonRef: (ref) => this.button = ref
    };

static defaultProps = {
    inputRef: (ref) => ref
};

我得到一个错误，说

这个
是未定义的

我需要做什么才能设置使用此
的默认道具

编辑：添加一些上下文

设置默认的
buttonRef
prop允许我在
MyButton
组件中使用ref，但如果父组件需要访问
MyButton
DOM节点，则始终能够传入自定义ref

class MyButton extends React.Component {
    static defaultProps = {
        buttonRef: (ref) => this.button = ref
    };

    componentDidMount() {
        Ladda.bind(this.button);
    }

    render() {
        return (
            <button
                ref={(ref) => this.button = this.props.buttonRef(ref)}
                onClick={this.props.handleClick}
            >
                {this.props.buttonText}
            </button>
        );
    }
}

编辑：显然，我的简化示例没有很好地说明这一点，所以我可以提出一个更实际的示例，或者你们都可以回答最初的问题：我需要做什么才能在我的
默认道具中使用
这个
？我可以不再使用JS类语法吗

当使用将嵌套组件挂接到某个第三方API的HOC时，为特定元素的ref使用defaultProp的约定非常有用。我有一个
AddressSearch
HOC，它通过传递给包装组件的函数获取节点。然后，它使用该节点将其与谷歌的PlacesAPI连接起来

因此，我从HOC中获得了我的
addAddressSearch（组件）
函数。它添加了连接GooglePlacesAPI所需的函数。但要让Google的API发挥作用，我需要知道我使用的是什么DOM节点。因此，我向我的
Input
组件传递一个
inputRef
，该组件允许我的
AddressSearchInput
访问相应的节点

class AddressSearchInput extends React.Component {
    static defaultProps = {
        inputRef: (ref) => this.addressSearchInput = ref
    };

    componentDidMount() {
        let node = this.addressSearchInput;

        this.props.mountAddressSearch(node);
    }

    render() {
        return (
            <div>
                <Input
                    inputAttributes={inputAttributes}
                    inputRef={(ref) => this.addressSearchInput = this.props.inputRef(ref)}
                    labelText={<span>Event address or venue name</span>}
                    labelClassName={labelClassName}
                />
            </div>
        );
    }
}

AddressSearchInput = addAddressSearch(AddressSearchInput);

module.exports = AddressSearchInput;

// Here's the Input component if that helps complete the picture here
class Input extends React.Component {
    render() {
        return (
            <div>
                <Label>{this.props.labelText}</Label>
                <HelperText text={this.props.inputHelperText} />
                <input
                    {...this.props.inputAttributes}
                    ref={this.props.inputRef}
                ></input>
            </div>
        );
    }
}

我可以到处使用
AddressSearchInput
，它不会破坏任何东西

class UserStreetAddress extends React.Component {
    componentDidMount() {
        let node = this.userStreetAddressInput;
        this.props.mountValidateOnBlur(node, userValidationsArray);
    },
    render() {
        return (
            <div>
                <AddressSearchInput
                    inputRef={(ref) => this.userStreetAddressInput = ref}
                    hasError={this.props.hasError}
                />
                {this.props.errorMessageComponent}
            </div>
        );
    }
}

这似乎是没有错误的工作

无论如何，原来的问题仍然存在我需要做什么才能在我的
defaultProps
中使用
this
？我是否可以不再使用JS类语法执行此操作？
如果需要对按钮进行引用，请在类级别绑定一个变量并将其分配给该类变量。例如：

export default class MyComponent extends Component {
  componentDidMount() {
    // button will be available as `this.button`
  }

  button = null;  // initialize to null

  render() {
    return (
      <div>
        <Button ref={e => { this.button = e; }} />
      </div>
    );
  }
}

导出默认类MyComponent扩展组件{
componentDidMount（）{
//按钮将作为“this.button”提供`
}
button=null；//初始化为null
render（）{
返回(
{this.button=e；}}/>
);
}
}
这实际上应该是一个方法，而不是一个属性

class MyButton extends React.Component {
    setButtonRef (ref) {
        this.button = ref;
    }
    componentDidMount() {
        Ladda.bind(this.button);
    }
    render() {
        return (
            <button
                ref={ ref => this.setButtonRef(ref) }
                onClick={this.props.handleClick}
            >
                {this.props.buttonText}
            </button>
        );
    }
}

class MyButton扩展了React.Component{
setButtonRef（ref）{
this.button=ref；
}
componentDidMount（）{
绑定（这个按钮）；
}
render（）{
返回(
this.setButtonRef（ref）}
onClick={this.props.handleClick}
>
{this.props.buttonText}
);
}
}
由于静态属性不知道类实例，如果必须让静态方法知道给定实例，唯一的方法是将实例作为参数传递给静态方法：

<button
    ref={(ref) => this.button = this.props.buttonRef(this, ref)}
    onClick={this.props.handleClick}
>

static
是类本身的方法，而不是类的实例
此
引用MyButton类的实例，因此在静态方法中无效。您试图做的事情似乎很奇怪-也许可以添加一些上下文，我们可以帮助找到另一种方法。这很难理解如果我阅读代码，为什么不将
onMouseOver
事件向下传递到
MyButton
，在父级中定义
doSomething
，然后向下传递它。这样做
Ladda.bind
是不寻常的，为什么Ladda需要引用
这个.button
？我觉得如果你需要这样做，那么你构建组件的方式就有问题了。你可以用下面的方式访问child ref，这并不奇怪。想象一下，您想在组件内放置一个按钮，单击该按钮时，该按钮会删除组件本身。您可以简单地在默认属性中使用
document.getElementById（）
，是的，但是如果您的组件在服务器上呈现呢？上面没有
文档
。
class MyButton extends React.Component {
    setButtonRef (ref) {
        this.button = ref;
    }
    componentDidMount() {
        Ladda.bind(this.button);
    }
    render() {
        return (
            <button
                ref={ ref => this.setButtonRef(ref) }
                onClick={this.props.handleClick}
            >
                {this.props.buttonText}
            </button>
        );
    }
}

<button
    ref={(ref) => this.button = this.props.buttonRef(this, ref)}
    onClick={this.props.handleClick}
>

static defaultProps = {
    buttonRef: (instance, ref) => instance.button = ref
};