Question

我有一个像这样的渲染的简单组件：

render: function(){
        return (
            <textarea className="wmd-input" id="wmd-input" ref={this.initiatePagedown}></textarea>
        )
}

initiatePagedown: function(input){
         //code that initiates markdown editor.
         attr = $(input).attr('id').split('wmd-input')[1];
        converter = new Markdown.Converter();
        Markdown.Extra.init(converter, {highlighter: "highlight"});
        editor = new Markdown.Editor(converter, attr);
        return editor.run();    
    },

组件安装n次不同，因此创建了多个textareas。

问题是ref回调是在第一个组件的输入下运行的，因此它始终是第一个被操纵的组件，而不是我选择的组件。所以，让我们说这个组件被挂载了两次，然后在第一个组件实例上调用ref回调两次，而不是每个组件实例一次。我该如何解决这个问题？

Answer 1

您正在使用Pagedown编辑器指向页面上的特定元素ID，因为您正在传递第二个参数attr：

new Markdown.Editor(converter, attr);

查看the documentation以获取Markdown.Editor构造函数的第二个参数：

如果给定，此参数是一个字符串，附加到编辑器使用的三个元素的HTML元素ID中......因此您可以将第二个输入框创建为<textarea id="wmd-input-2">并传递字符串＆＃34 -2＆＃34;作为构造函数的第二个参数。

现在，您始终使用相同的ID创建编辑器：

id="wmd-input"

因此编辑器构造函数将始终匹配页面上该ID的每个现有实例。

这是一个非常差的API，迫使您指向元素ID。作为一种解决方法，我可能会将id作为您传入的道具，以便包装组件/页面可以决定应该有多少编辑器，并且您可以像这样构建ID

return (
    <textarea id={ `wmd-input-${ this.props.id }` } ... />
)

然后你可以用

之类的东西来实例化不幸的API

editor = new Markdown.Editor(converter, `-${ this.props.id }`);

ref回调正在应用于第一个匹配的类

1 个答案: