javascript - 在 props 对象之外传递 "props"是反模式吗？

Question

我正在使用AntD <Table />成分。当我生成列时，我想将自定义 Prop 传递给我的单元格，这些单元格不属于我向表格提供的数据的一部分。可能是主题、调色板、布局设置等。

每一列都由一个对象表示，并具有 render方法。 AntD 迭代行和列并传递 record该行由给定的 cell 渲染.

{
   ... // keys like `key`, `title`, `dataIndex` ...
   render: (record) => {...}
}

而不是像这样直接将额外的 Prop 传递给组件本身:

{
   ... // keys like `key`, `title`, `dataIndex` ...
   render: (record) => <MyCell {...record} extraProp={extraProp} extraProp2={extraProp2} />
}

我养成了这样写的习惯:

{
   ... // keys like `key`, `title`, `dataIndex` ...
   render: MyCell(extraProp, extraProp2)
}

其中 MyCell 定义为:

const MyCell = (extrProp, extraProp2) => props => {...}

我应该坚持使用常规 Prop 吗？或者我这样传递额外的 Prop 可以吗？

会导致性能不佳吗？将来它会不会咬我，让我的 bug 难以追踪？

谢谢

Answer 1

两种方法有细微差别。

// It isn't a functional component, 
// it's curried function which returns a functional component
const generateMyCell = (extrProp, extraProp2) => props => {...}

//   ^ naming it MyCell is misleading.

主要区别在于额外的 props (extraProp-x) 在使用函数时是动态的，在使用函数组件时是静态的:

//                     v The extra props are static, they won't change
render: record => (
  <MyCell {...record} extraProp={extraProp} extraProp2={extraProp2} />
);

//         v The developer shows intetation that props may change
render: generateMyCell(extraProp, extraProp2)

最常见的方式是渲染功能组件，并让父组件处理 props 的变化。

// Most readable and common
const generateTableColumns = () => {
  // Handle the props here.
  const columns = [
    {
      render: (
        <MyCell {...record} extraProp={extraProp} extraProp2={extraProp2} />
      )
    }
  ];

  return columns;
};

// Usage
<Table columns={generateTableColumns()} />;

总之，这不是“反模式”，这取决于你的意图是什么，有时会使用“返回组件的函数”，但我怀疑情况是否如此。

Note that you can add default props to generateMyCell:

const generateMyCell = (extrProp = def1, extraProp2 = def2) =>
props => {...}

// Call it with props when they need to change.
generateMyCell()