Question

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

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

或

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

或其他任何方式??

谢谢！

Answer 1

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

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

Answer 2

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

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

Answer 3

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

或

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

我是TodoList已经解释了（或者应该解释）的意见本身由极具分量的名字，所以使用时要调用的组件应该在渲染方面的重要性顺序的道具顺序和用户体验。

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

我希望术语尽可能简单，并在组件之间保持一致，因此所有需要数据的组件（大约 90% 的时间是数组。很少是对象）都应该有一个名为 data 的道具。如果您将它命名为 todos，那么您将不得不为每个组件考虑一个新名称，为什么要在考虑名称上浪费时间呢？ ?

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

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

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

有问题的命名情况示例：

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，但同样不适用于 React props。

ReactJS-道具命名的首选约定

3 个答案:

有问题的命名情况示例：