如何使用react-mentions撰写react-textarea-autosize

Question

现在我很清楚mixins和继承通常被认为是 bad ，并且组合是要走的路，这来自：

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

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

现在，当你发现两个专门针对不同事物的组件并且你想要一个混合了这两个行为的结果的组件时该怎么办？例如，我想要一个textarea，当文本超出初始行时，它们都自动增长，并允许在内部提及（aka。react-mentions与react-textarea-autosize混合

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

Answer 1

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

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

这里的关键是我对“ control” div应用了最小高度为45px的值，该值由react-mention包追加。这样，您将获得附带的结果。

Answer 2

希望钩子可以解决这个问题。