Question

嗨，我有一个带有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>

Answer 1

您可以如下创建自己的自定义组件class ViewControllerList: UITableViewController{ override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { DispatchQueue.global(qos: .background).async { // Background Thread DispatchQueue.main.async { // Run UI Updates or call completion block let storyBoard = UIStoryboard(name: "Display", bundle:nil) let displayView = storyBoard.instantiateViewController(withIdentifier: "ViewControllerDisplay") as! ViewControllerDisplay self.present(displayView, animated: true, completion: nil) } } } }

<Span>

，可以像class Span extends Component { constructor(props) { super(props); } render() { return <span>{this.props.title}</span>; } }

那样使用

Answer 2

对于您的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>
            )
        }

    }

Answer 3

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>

React.js中的自定义标题

3 个答案: