带有多个参数的 React.FC 调用答案

【问题标题】：React.FC call with multiple parameter带有多个参数的 React.FC 调用
【发布时间】：2022-01-23 19:02:03
【问题描述】：

我正在尝试使用三个参数调用该函数，但它不起作用。

这里是React.FC：

const FormStructure: React.FC<{ record: ModelClass, question: Array<ModelClass>, dropdownItems: Array<ModelTypeClass> }> = ({
    record, question, dropdownItems,
}) => {
...
}

这是函数调用：

return (
   <Modal
      visible={this.state.modalVisible}
      onCancel={() => this.setState({ modalVisible: false })}
   >
      {FormStructure(record, this.state.question, this.state.dropdownItems)}
   </Modal>
)

以下错误消息： “预期有 1-2 个参数，但得到了 3 个”

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

由于 FormStructure 是一个组件，您不应该将其作为函数调用。你应该创建一个 JSX 元素：

<Modal
  visible={this.state.modalVisible}
  onCancel={() => this.setState({ modalVisible: false })}
>
  <FormStructure 
    record={record}
    question={this.state.question}
    dropdownItems={this.state.dropdownItems}
  </FormStructure>
</Modal>

如果，假设你想把它作为一个函数来调用（同样，你不应该这样做，因为这是一个组件），符合类型定义的方法是传入一个具有三个属性的对象：

FormStructure({ 
  record: record,
  question: this.state.question,
  dropdownItems: this.state.dropdownItems,
});

【讨论】：

那么什么时候最好使用函数语法呢？
如果它是一个组件，几乎永远不会。

【解决方案2】：

FormStructure 是一个函数式组件，因此您最好使用以下语法 (JSX) 来呈现它：

return (
  <Modal
    visible={this.state.modalVisible}
    onCancel={() => this.setState({ modalVisible: false })}
  >
    <FormStructure record={record} question={this.state.question} dropdownItems={this.state.dropdownItems)} />
  </Modal>
)

【讨论】：