如何以React方式动态注入div?

时间:2019-03-17 19:57:41

标签: javascript reactjs

有人可以给我一些指导,以指导我如何动态注入一个可以包裹另外两个呈现div的div。

所以我有这样的东西:

<div>first div</div> 
<div>second div</div>

在我注入div之后,将是这样的:

<> 
    <div>first div</div> 
    <div>second div</div> 
</>

2 个答案:

答案 0 :(得分:1)

您可以创建一个新的状态变量,例如shouldShowDiv,并在需要额外的true包装时将其设置为div,并在render方法中使用该包装有条件地添加它。

示例

const { Fragment } = React;

class App extends React.Component {
  state = {
    shouldShowDiv: false
  };

  toggleShowDiv = () => {
    this.setState(({ shouldShowDiv }) => ({ shouldShowDiv: !shouldShowDiv }));
  };

  render() {
    const { shouldShowDiv } = this.state;
    const content = (
      <Fragment>
        <div>first div</div>
        <div>second div</div>
      </Fragment>
    );

    return (
      <Fragment>
        {shouldShowDiv ? (
          <div style={{ backgroundColor: "green" }}>{content}</div>
        ) : (
          content
        )}
        <button onClick={this.toggleShowDiv}> toggle wrapper </button>
      </Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

答案 1 :(得分:0)

您可以制作一个HoC来包装任何其他组件,并基于prop将该组件原样显示或div包裹

const wrap = Component => ({wrapped, ...props}) => {
  const content = <Component {...props} />;
  if (wrapped) return <div>{content}</div>;
  return content;
}

const TwoDivs = () => (
  <React.Fragment>
    <div>first div</div>
    <div>second div</div>
  </React.Fragment>
);

const WrappedTwoDivs = wrap(TwoDivs);

const App = () => <WrappedTwoDivs wrapped={true} />