React.js 中的自定义标题

Question

Hi I Have an img with the title attribute that I would like to customize in react.js however I am new to it.嗨，我有一个带有 title 属性的 img，我想在 react.js 中自定义它，但是我是新手。 I have done an example in HTML & CSS which is possible.我在 HTML 和 CSS 中做了一个例子，这是可能的。 The below is the equivalent HTML & CSS version.下面是等效的 HTML 和 CSS 版本。 Please Help me to convert it in React.js请帮我在 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>

Answer 1

 class App extends React.Component{ state = { title:"HEllo WORLD THIS IS RED!" } render(){ let imageSource = "http://tineye.com/images/widgets/mona.jpg"; return( <div> <span title={this.state.title}> <img src={imageSource} alt="Smiley face HEY HEY HEY" width="42" height="42" /> </span> </div> ) } } ReactDOM.render(<App/> , document.getElementById('root'));

 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; }

 <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> <body> <div id="root"></div> </body>

Answer 2

To your App component you can directly add the image and place the span inside the jsx到您的 App 组件，您可以直接添加图像并将跨度放置在 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.js 中的自定义标题

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-04-03 10:08:05

解决方案2
0 2019-04-03 09:57:25

React.js 中的自定义标题

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-04-03 10:08:05

解决方案2 0 2019-04-03 09:57:25

解决方案1
2 已采纳 2019-04-03 10:08:05

解决方案2
0 2019-04-03 09:57:25