有人可以给我一些指导,以指导我如何动态注入一个可以包裹另外两个呈现div的div。
所以我有这样的东西:
<div>first div</div>
<div>second div</div>
在我注入div之后,将是这样的:
<>
<div>first div</div>
<div>second div</div>
</>
答案 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} />