ReactJS - 组件 - 最佳实践

Question

我很反应，我需要为输入字段创建一个字符计数器组件（ CharacterCounter ）。

这个问题不是特定于这个组件（字符计数器） - 但是关于组件最佳实践的一般性问题。

我可以通过两种方式实施（据我所知 - 如果有更好的方式我很高兴听到它）：

1）包装组件并将输入字段作为子项 - 组件将在输入字段后插入范围（用于显示计数器）

<CharacterCounter maxLength={50}>
    <input type="text">
  </CharacterCounter>

和

const input = this.container.firstChild
input.addEventListener('keyup', function() { ... });

• 优点：我可以为同一输入提供多个组件 - 如果我需要额外的功能（组件）来进行此输入。
• 缺点：如果由于某种原因输入停止成为此组件的第一个子项 - 停止工作/脆弱

2）创建一个通用组件，它将在render（）函数上呈现输入和计数器

像：

<CharacterCounter />

render() {
    return (
        <input type="text">
        <span>{this.state.count}</span>
    )

• 优点：不脆弱 - 不依赖第一个孩子
• 缺点：不确定是否可以为同一输入设置其他组件 - 让我们说每次用户输入/或焦点/或模糊字段时我都需要另一个组件进行跟踪

最佳做法是什么？

Answer 1

第二种方法肯定更好，因为它不会直接干扰DOM元素。

如果您想访问DOM元素，使用refs仍然会更好。

  

缺点：不确定是否可以使用其他组件   相同的输入 - 让我们说我需要另一个组件来跟踪每一个   用户输入的时间/或焦点/或模糊字段

只需props即可轻松解决这个问题。

Answer 2

您可以使用带有状态的组件的第二种方法，然后使用组合来扩展该组件或创建该组件的更多“特殊情况”。

let {Component} = React;

class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {count: 0}
  }
  
  render() {
    return <div>
      <input 
      {...this.props}
      onChange={() => {
        let count = this.refs.inputCount.value.length;
        this.setState({count})
      }}
      type="text" 
      maxLength="50"
      ref="inputCount" />
      <span> {this.state.count} / 50</span>
    </div>
  }
}

class FocusInput extends Component {
  render() {
    return <Input 
    onFocus={() => {
      console.log('Focus')
    }} />
  }
}

class App extends Component {
  render() {
    return <div>
      <Input />
      <FocusInput />
    </div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<script src="https://unpkg.com/react@16.1.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0/umd/react-dom.development.js"></script>
<div id="app"></div>