ReactJS-道具命名的首选约定

我不认为有一个铁板一块的惯例来命名道具。您可以查看以下文章:

• How to name props for React components
• React components naming convention

这最终取决于您、您的团队以及您为项目中的您和其他开发人员编写文档的能力。

没有更可取的惯例。道具命名是一个品味问题,为了保持一致性,道具命名可能因项目而异。

onRemove onRemoveTodo 或 onRemoveItem

<TodoList todos={todos} onRemoveTodo={removeTodo} onCheckTodo={checkTodo} />

或

<TodoList items={todos} onRemoveItem={removeTodo} onCheckItem={checkTodo} />

我认为 TodoList

必须为组件提供一些数据(todo ITME列表),以便将其作为要写入的第一个道具。我不会说出它的名字 todos data ,所以很明显,这是该组件的数据。

我希望术语尽可能简单,并且在各个组件之间保持一致,因此所有需要数据的组件(大约90%的时间是一个数组的时间)。很少有对象)应该有一个名为 数据 . 如果你能给它命名的话 待办事项 那么你就必须为每个组件想出一个新的名字,为什么要浪费时间去想名字呢?

上述逻辑扩展到所有其他道具(除 数据 )

onChange ,它应该做内部的事情,然后才调用父级的 一旦改变 .

const Parent = ({ setData }) => {
  return <Child onChange={setData} />
}

const Child = ({ onChange }) => {
  const onChange = value => {   // <-- "onChange" already defined as a prop in the line above
    console.log(value)
    onChange(value)
  }
  
  return <Child onChange={onChange} /> // also has "onChange" 
}

我所做的只是重命名 const onChange = value => ... const onLocalChange = value => 然后我就可以做了 <Child onChange={onLocalChange} />

然后每次我遇到这种情况,我都会用这种思维方式,这就是 钥匙 使大型代码库可预测的意义是,随机的新开发人员在任何地方都可以看到相同的模式,然后(希望)可以缩短学习曲线。

onSomething ,所以这个词 on 始终放在第一位,将方法/属性“标记”为事件处理程序。

关于命名 props 与问题的经典方面一样,这里有一些例子:

const Comp = ({ myNiceProp, my_nice_prop, ...rest }) => <h1>
  {myNiceProp}
  {my_nice_prop}
  {rest["my-nice-prop"]}
</h1>

ReactDOM.render(<div>
    <Comp myNiceProp="1" />
    <Comp my_nice_prop="2" />
    <Comp my-nice-prop="3" />
</div>, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

第一个例子- myNiceProp 无效的 变量名。虽然你可以用 special characters for js variables 道具 .