反应：将JSX作为函数参数传递

Question

我正在尝试传递JSX代码来定义新的自定义道具。例如

createChildComponent(ComponentTag, prop_definitions) {
    return <ComponentTag prop_definitions />

}

<button onClick={this.createChildComponent(Child1, { color: 'blue', handleClick = this.handleClick }}>Create</button>

对象中的键/值和变量分配无效。有没有办法使用参数传递JSX（在这种情况下是prop分配）？

Answer 1

要传递道具，您所要做的就是使用传播语法。

createChildComponent(ComponentTag, props = {}) {
  return <ComponentTag { ...props } />
}

这会将您的道具对象散布到键/值对中，就像您显式传递道具一样。

加分点-将{}的默认值设置为props，这样，如果省略props参数，则方法不会失效。