React Hooks 和 Props 的命名规范是什么？

Question

组件的props名称和本地state变量名称发生了冲突。是否有全局遵循的命名约定？请查看“selected”props和state。

function Select({options,selected,onSelect}){

    let [selected,setSelect]=useState(selected)

    //... useeffect to update local state if props changes

    function setSelectLocal(){
       setSelect(e.target.value)
       onSelect(e.target.value)
    }

    return (
    <select onChange={onSelect} value={selected}>
        {options.map((option)=><option>{option}</option>)}
    </select>  
   )
}

谢谢

- Vimalesan

---

检查参数“selected”和usestate声明。无论如何，它都会抛出重复声明错误。如果使用更好的命名约定，则可能避免在输入代码时出现此类问题。 - Vimalesan

Answer 1

我认为应该使用 const [selectedValue, setSelectedValue] = useState('默认值')。

然而，更好的选择是让父组件处理状态，并通过props简单地传递处理程序。

function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState('default value')

  const onChange = (e) => {
    setSelectedValue(e.target.value)
  }

  return (
    <div>
      // other stuff here
      <ChildComponent options={stuff} onChange={onChange} selectedValue={selectedValue} />
    </div>
  )
}

function ChildComponent({ options, onChange, selectedValue }) {
  return (
    <select onChange={onChange} value={selectedValue}>
      {options.map((option)=><option>{option}</option>)}
    </select>  
  )
}

- Richard Vanbergen

Answer 2

我的建议是将prop变量重命名为"org[prop name]"

function Select({options, selected: orgSelected, onSelect}){

    let [selected,setSelect]=useState(orgSelected)

    //... useeffect to update local state if props changes

    function setSelectLocal(){
           setSelect(e.target.value)
           onSelect(e.target.value)
    }

    return (
        <select onChange={onSelect} value={selected}>
            {options.map((option)=><option>{option}</option>)}
        </select>  
    )
}

- chenop

Answer 3

简洁

我会根据值或设置器的语义来命名，例如：

const [opened, open] = useState(false);

如果自然语言提供了一对良好的状态和操作，则这样做效果很好。 但并不总是清楚的，因为为什么不是 open，open （形容词和动词？）。

备用

文档中通常会看到类似于以下内容，这是一个合理的默认设置

const [progress, set_progress] = useState({});

因为 progress，progress（名词，动词）将导致相同的名称。

- Dima Tisnek