ReactJS

Question

我想知道 ReactJS 社区首选的 prop 命名约定是什么？

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

或

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

或任何其他方式 ??

谢谢！

Answer 1

我认为道具的命名没有固定的约定。您可以看看以下文章：

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

Answer 2

没有首选约定。道具命名是一个品味问题，为了保持一致性，可能会因项目而异。

如果回调 prop 名称没有歧义，它可能应该是 onRemove，而不是 onRemoveTodo 或 onRemoveItem。只是因为后缀没有提供任何有用的信息并且需要更多的字符来输入。

Answer 3

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

或

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

我认为TodoList已经通过组件名称解释（或应该解释）自身，因此调用组件时使用的道具的顺序应该是术语的重要性顺序渲染和用户体验。

必须为该组件提供一些数据（todo-itmes 的列表），以便它应该是要写入的第一个道具。我不会将其命名为 todos，但可能只是将其命名为 data，因此很明显这是该组件的数据。

我想让术语尽可能简单，并且在组件之间保持一致，所以所有需要数据的组件（大约 90% 的时间是数组。很少 Object）应该有一个名为 data。如果您将其命名为 todos ，那么您将不得不为每个组件考虑一个新名称，为什么要浪费时间考虑名称呢？

以上逻辑扩展到所有其他道具（除了data）

有时您会遇到这样的情况：parent 组件有 onChange 事件需要传递给 child 组件，而 child 组件也有自己的 onChange，它应该做内部事情，然后才调用 parent 的 onChange。

因为不能同时拥有同名的 prop 和函数，所以需要在 prop-level 或局部函数级别进行某种重命名：

有问题的命名情况示例：

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

然后每次我遇到这种情况时，我都会使用这个 way-of-thinking，这是 key 使大型代码库可预测的意义，即随机的新开发人员到处都看到相同的模式，然后可以（希望）缩短学习曲线。

另一个约定是将事件处理程序命名为 onSomething，因此 on 一词始终排在第一位，将 method/prop“标记”为事件处理程序。

关于问题的经典方面的命名 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 是我所见的“标准”（而且我见得多了）。第二个可以像第一个一样使用，但第三个不能“解构”，因为它是一个 invalid 变量名。虽然你可以使用 special characters for js variables 但同样不适用于 React props.

ReactJS - 道具命名的首选约定

ReactJS - Preferred convention for prop naming

javascript

naming

naming-conventions

有问题的命名情况示例：