参考原始DOM元素类

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访问其内部某个组件的子this.props.children 。

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

这会将您放入Div标签内的所有内容包装在HTML div标签之间。 要访问赋予<Div>的组件的{...this.props} ，只需添加{...this.props} ，它将在实际div上添加所有{...this.props} 。

您可以使用上述组件，例如：

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

将转换为：

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