gpt4 book ai didi

javascript - 渲染CSS样式应用了React无状态功能语句

转载 作者:行者123 更新时间:2023-12-03 00:24:25 25 4
gpt4 key购买 nike

我正在尝试在 React.js 中渲染用无状态功能组件编写的组件。当我尝试渲染下面的代码时,该元素没有显示。 React 和 React-Dom 脚本文件已正确插入。

const showMe = () => {
return (
<div className="hi"></div>
)
};

ReactDOM.render(showMe, document.getElementById("target"));
#target {
position:absolute;
left:0;
right:0;
margin:0 auto;
top:50%;
transform:translateY(-50%);
border:1px solid red;
width:600px;
height:500px;
}

.hi {
border:1px solid blue;
position:absolute;
width:50%;
height:40%;
left:0;
right:0;
margin:0 auto;
top:50%;
transform:translateY(-50%);
}
<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="target">
</div>

最佳答案

const ShowMe = () => {
return (
<div className="hi"></div>
)
};

ReactDOM.render(<ShowMe />, document.getElementById("target"));
#target {
position:absolute;
left:0;
right:0;
margin:0 auto;
top:50%;
transform:translateY(-50%);
border:1px solid red;
width:600px;
height:500px;
}

.hi {
border:1px solid blue;
position:absolute;
width:50%;
height:40%;
left:0;
right:0;
margin:0 auto;
top:50%;
transform:translateY(-50%);
}
<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="target">
</div>

关于javascript - 渲染CSS样式应用了React无状态功能语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54155331/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com