Question

组件的道具名称和局部状态变量名称冲突。全球是否遵循任何命名约定？参见“选定的”道具和状态

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

谢谢

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

Answer 2

简洁

我会根据值或 setter 的语义来命名名称，例如：

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

如果自然语言为状态和动作提供了良好的配对，那么效果会很好。这并不总是很清楚，因为它不应该是 open, open（形容词和动词？）。

后备

经常在文档中看到这样的东西，这是一个合理的默认

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

因为 progress, progress（名词，动词）会导致相同的名字。

React钩子和道具的命名约定？

2 个答案:

简洁

后备