javascript - React Prop 的可重用性

Question

我目前有一段代码是这样的:

    return (
        creatable
        ? <Select
            options={options}
            value={value}
            onChange={(selectedValue) => valueSetter(selectedValue)}
        />
        : <CreatableSelect
            options={options}
            value={value}
            onChange={(selectedValue) => valueSetter(selectedValue)}
        />
    )

如您所见，这两个组件都接受完全相同的 Prop 。有什么方法可以提高此代码中的代码可重用性(比如将 props 放入字典并解压缩)？

谢谢!

Answer 1

是的，您可以通过 spread syntax 轻松实现此目的.

应该是这样的:

const props = {
   options,
   value,
   onChange: (selectedValue) => valueSetter(selectedValue)
}

return (
   creatable
      ? <Select {...props} />
      : <CreatableSelect {...props} />
)

我们在这里所做的是“传播”我们创建的专用 props 对象的内容，并将其传递给目标组件。