Question

有一个主要的React组件和一个名为AttributeInput的子组件。为了避免代码重复，我从主要组件中提取了一些代码并将其放在AttributeInput

的方法中

我试图引用这样的代码：

{this.state.attributeInput ? <AttributeInput ref="attributeInput"/> : null}

<div>
  {this.refs["attributeInput"].displayInputField(
      "List Name",
      "List Name(<15 characters - A-Z, 0-9 and _ only)",
      this.setListName
  )}
  {this.refs["attributeInput"].displayInputField(
      "List Description",
      "List Description",
      this.setListDescription
  )}
</div>

但是，如果this.state.attributeInput为false，则不会呈现AttributeInput。因此，当我在这里引用它时，

this.refs["attributeInput"].displayInputField(
    "List Name",
    "List Name(<15 characters - A-Z, 0-9 and _ only)",
    this.setListName
)

我收到错误消息，指出AttributeInput未定义。

如果没有呈现，我可以引用AttributeInput吗？我的方法有替代方案吗？

Answer 1

听起来您正在尝试communicate between two React components，但您希望共享代码并调用AttributeInput组件中存在的方法？

在组件之间共享代码的最简单方法是将共享代码分离为mixin。

var SharedCode = function() {
  return {
    displayInputField: function(name, description, other) {
      // ...
    }
  };
};

然后只需将此mixin包含在需要displayInputField方法的组件中。

var AttributeInput = React.createClass({
  mixins: [SharedCode]
});

在您定义并包含mixin之后，您将能够在this上引用新添加的属性。

return (
  <div>
    {this.displayInputField(/* ... */)}
  </div>    
);

未呈现的反应参考子组件

1 个答案: