reactjs - 反应钩子和道具的命名约定？

Question

组件的 props 名称和局部状态变量名称发生冲突。是否在全球范围内遵循任何命名约定？查看“选定”的道具和状态

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>  
   )
}

谢谢

标签： reactjs

Answer 1

我会说const [selectedValue, setSelectedValue] = useState('default value')。

但是，更好的选择可能是让父组件处理状态并通过 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>  
  )
}