javascript - ReactJS - 组件 - 最佳实践

Question

我是 React 的新手，我需要为输入字段创建一个字符计数器组件 (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>
    )

• 优点:不脆弱——不依赖第一个 child
• 缺点:不确定是否可能有其他组件用于相同的输入 - 假设每次用户键入/或聚焦/或模糊字段时我都需要另一个组件进行跟踪

什么是最佳实践？

Answer 1

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

如果您想访问 DOM 元素，最好还是使用 refs .

disadvantage: Not sure is possible to have other component for the same input - let's say I need another component for tracking every time the user type/ or focus/ or blur the field

只需使用 props，您就可以轻松解决这个问题。