React 道具的可重用性

Question

我目前有一段这样的代码：

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

正如您所看到的，两个组件都接受完全相同的 props。有什么方法可以提高此代码中的代码可重用性（例如将道具放入字典中并解压它们）？

谢谢你！

Answer 1

是的，您可以通过spread syntax.

应该看起来像这样：

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

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

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