Javascript 如何撰写react textarea自动调整react提及的大小

现在我很清楚，混合和继承通常被认为是不好的，组合是一条路，这是从：

---

现在，当您发现两个组件专门处理不同的事情，并且希望一个组件是这两种行为混合的结果时，该怎么办？例如，我想要一个文本区域，当文本超出初始行时，该区域会自动增长，并允许在内部提及（aka.mix

react-indications

with

react-textarea-autosize

）

• 我该如何以一种有效的方式来创作这两部作品呢
• 我是否应该编写一个全新的组件复制/合并两个组件的内部代码
• 在这样的场景中，如何构图

---

我遇到了同样的问题。使用react，您不必使用react文本自动调整大小，因为您可以通过css实现相同的行为，从而自动增加生成的文本区域。考虑下面的例子

<MentionsInput
   value={content}
   placeholder="Add a comment"
   onChange={this.onChange}
   className="mentionWrapper">
        <Mention
          trigger="@"
          data={users}
          className="mentionedFriend"
          displayTransform={(id, display) => `@${display}`}
        />
</MentionsInput>

这里的关键点是，我已经将最小高度45px应用到“control”div，该div由react提纲包附加。通过这样做，您将得到附加的结果。

---

我想知道高阶组件在这里是否有用，但我没有任何具体的想法。@EricWalker，肯定有一种方法使mixin+继承不那么糟糕。我的意思是，我们使用OO是有原因的：）我会接受这个答案，但是你不能用鼠标按常规方式调整输入的大小。在css中，（.NinterWrapper.NinterWrapper\uuuu控件。NinterWrapper\uu输入）resize属性设置为none，删除它，它将允许用户调整大小。您可以根据需要修改css。但是不建议调整大小，因为我们已经有了自动调整大小功能。在我看来，两者并不能给用户带来直观的体验。

.mentionWrapper {
  width: 100%;
  background: transparent;
  font-size: 0.9rem;
  color: #a9b5c4;
 }
 .mentionWrapper .mentionWrapper__control {
   border-radius: 25px;
   border: 1px solid #3a546f;
   min-height: 45px;
  }

 .mentionWrapper .mentionWrapper__control .mentionWrapper__highlighter {
  padding: 0.7rem 1rem;
 }

 .mentionWrapper .mentionWrapper__control .mentionWrapper__input {
  padding: 0.7rem 1rem;
  outline: 0;
  border: 0;
  resize: none;
  outline: none;
  font-size: 0.9rem;
  color: #7288a3;
  border-color: #3a546f;
  overflow: hidden;
 }

.mentionWrapper .mentionWrapper__control .mentionWrapper__input::placeholder {
  color: #7288a3;
 }

.mentionWrapper__suggestions {
  background-color: rgba(0, 0, 0, 0.6) !important;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
 box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.75);
 border-radius: 0.8rem;
 }

.mentionWrapper__suggestions .mentionWrapper__suggestions__list {
  font-size: 14px;
 }

.mentionWrapper
.mentionWrapper__suggestions
.mentionWrapper__suggestions__item--focused {
 color: #ffffff;
 border-bottom: 1px solid #3a546f;
 font-weight: 600;
}

.mentionedFriend {
  color: #7288a3;
  text-decoration: underline;
 }