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

Question

我现在很清楚混合和继承通常被认为不好而组合才是正确的选择，这来自:

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

---

现在，如果您发现两个专门从事不同事物的组件并且您想要一个混合了两种行为的结果的组件，该怎么办？例如，我想要一个文本区域，当文本超出初始行时自动增长，并允许在内部提及(又名。混合 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 的最小高度应用于“控制”div，这是由 react-mention 包附加的。通过这样做，您将获得附加的结果。