Javascript React.js中的自定义标题_Javascript_Html_Css_Reactjs

Javascript React.js中的自定义标题

javascript html css reactjs

Javascript React.js中的自定义标题,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,嗨，我有一个带有title属性的img，我想在react.js中自定义它，但是我对它还不熟悉。我已经用HTML和CSS做了一个可能的例子。下面是等效的HTML和CSS版本。请帮助我在React.js中转换它 <!DOCTYPE html> <html> <body> <style> span:hover { position: relative; } span[title]:hover:after { content: att

嗨，我有一个带有title属性的img，我想在react.js中自定义它，但是我对它还不熟悉。我已经用HTML和CSS做了一个可能的例子。下面是等效的HTML和CSS版本。请帮助我在React.js中转换它

<!DOCTYPE html>
<html>
<body>
<style>
span:hover {
    position: relative;
}

span[title]:hover:after {
     content: attr(title);
     padding: 40px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 1;
     background:red;
}
</style>
<span title="HEllo WORLD THIS IS RED!"> 
<img src="smiley.gif" alt="Smiley face HEY HEY HEY" width="42" height="42" >
</span>
</body>
</html>


跨度：悬停{
位置：相对位置；
}
span[标题]：悬停：在{
内容：attr（title）；
填充：40px 8px；
位置：绝对位置；
左：0；
最高：100%；
z指数：1；
背景：红色；
}

您可以直接将图像添加到应用程序组件中，并将跨度放在jsx中

class App extends React.Component {
        render(){
            return (
                <React.Fragment>
                    <span>HEllo WORLD THIS IS RED!</span>
                    <img src="your image source" alt="image" />
                </React.Fragment>
            )
        }

    }

类应用程序扩展了React.Component{
render（）{
返回(
你好，世界，这是红色的！
)
}
}

类应用程序扩展了React.Component{
状态={
标题：“你好，世界，这是红色！”
}
render（）{
让imageSource=”http://tineye.com/images/widgets/mona.jpg"; 
返回(
)
}
}
ReactDOM.render（，document.getElementById（'root'））
span:悬停{
位置：相对位置；
}
span[标题]：悬停：在{
内容：attr（title）；
填充：40px 8px；
位置：绝对位置；
左：0；
最高：100%；
z指数：1；
背景：红色；
}
到目前为止，您尝试了什么？我看不到任何代码。请提供一份