将道具传递到组件的首选样式

Question

我将回到React，并希望坚持最佳实践。话虽如此，我找不到任何将功能传递到子组件的最佳方法的文档。更具体地说，如果我传递给子组件的函数需要使用父组件的props作为参数，那么以下哪一项更符合最佳实践。

<Button
  increaseCount={() => props.increaseCount(props.title)}
  label="loadMore"
/>

const Button = props => {
  return <button onClick={props.increaseCount}>{props.label}</button>;
};

或

<Button
  title={props.title}
  increaseCount={props.increaseCount}
  label="loadMore"
/>

const Button = props => {
  return (
    <button onClick={() => props.increaseCount(props.title)}>
      {props.label}
    </button>
  );
};

两者都可以使用，但是由于这是一个小型应用程序，所以我看不到随着应用程序的增长可能会出现任何性能影响或可维护性问题。

Answer 1

取决于您的Button逻辑，“经验法则”传递了必要的最小属性：

// JSX
<Button
  increaseCount={() => props.increaseCount(props.title)}
  label="loadMore"
/>

// `title` is not used within the component
const Button = props => {
  return <button onClick={props.increaseCount}>{props.label}</button>;
};

另一方面，滥用不必要的属性会增加错误的机会。

此外，在某些情况下，您可能会破坏现有的组件逻辑。

例如，当您的应用增长时，您可能希望更改increaseCount逻辑以接受两个参数而不是一个参数，那么您将需要记住访问Button实现并进行相应更改：

// You may misuse the `props.title` 
// and component may break on changing `increaseCount` logic
<Button
  title={props.title}
  increaseCount={props.increaseCount}
  label="loadMore"
/>

//              v props.title not used within the component
const Button = props => {
  return (
//                                              v Notice the bug, `props.label`
//                          v What happens when increaseCount logic changes?
    <button onClick={() => props.increaseCount(props.label)}>
      {props.label}
    </button>
  );
};