如何使用 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）

我应该如何以有效的方式组合两者？
我是否应该编写一个全新的组件 copying/merging 来自两个组件的内部代码？
在这种情况下，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 的 min-height 应用到 "control" div，这是由 react-mention 包附加的。通过这样做，您将获得附加的结果。

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

How to compose react-textarea-autosize with react-mentions

javascript

composition

mixins

reusability

reactjs