如何使用 react-mentions 组合 react-textarea-autosize

Question

我现在很清楚 mixin 和继承通常被认为是不好的，组合是要走的路，这来自：

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

https://facebook.github.io/react/blog/2016/07/13/mixins-thinked-harmful.html

---

现在，当您发现两个专用于不同事物的组件并且您想要一个是两种行为混合的结果的组件时，该怎么办？例如，我想要一个 textarea，当文本超出初始行时，它会自动增长，并允许在里面提及（又名。react-mentions与混合react-textarea-autosize）

• 我应该如何以有效的方式组合两者？
• 我应该编写一个全新的组件来复制/合并两个组件的内部代码吗？
• 在这种情况下，ReactJs 的组合方式是什么？

Answer 1

我遇到了同样的问题。使用react-mention，您不必使用react-text-autosize，因为您可以使用css实现相同的行为，它可以自动增长生成的文本区域。考虑下面的例子

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

为此，我使用了以下样式

.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;
 }

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