Question

例如，我想这样做：

const DynamicComponent = condition ? MyComponent : React.div;

const usedDynamicComponent = <DynamicComponent> How cool? </DynamicComponent>;

我在那里使用的是什么而不是React.div，这是我刚刚编造的东西？

Answer 1

const DynamicComponent = condition ? MyComponent : <div>{this.props.children}</div>;

const usedDynamicComponent = <DynamicComponent> How cool? </DynamicComponent>;

Answer 2

您可以访问this.props.children来制作布局类型的内容。您可以使用this.props.children。

访问自身内部某个组件的子项

class Div extends Component {
  render() {
    return <div {...this.props} >{this.props.children}</div>;
  }
}

这会将您放在HTML div标签之间的Div标记内的任何内容包装起来。要访问<Div>提供的组件的道具，您只需添加{...this.props}，它就会在实际div上添加所有道具。

您可以使用上面给出的组件，如：

<Div className="custom" custom_prop="value"><AnyReactComponent /></Div>

将转换为：

<div className="custom" custom_prop="value"><AnyReactComponent /></div>

请参阅原始DOM元素类

2 个答案: