#11 获取文本的高度


  • 0

    @ScriptOJ

    交下作业


  • 0

    class Post extends Component {
      
      showHeight(){
        console.log(this.refs.hg.clientHeight);
      }
      render () {
        return (<p ref="hg" onClick={()=>{this.showHeight();}}>{this.props.content}</p>)
      }
    }
    Post.propTypes = {
      content:PropTypes.string.isRequired
    }
    

  • 0

    @Roy 为啥不用this.p.style.clientHeight?


  • 0

    @krystal offsetHeight换成clientHeight试试?


  • 0

    @lunarsprite 无状态组件只是一个函数,不是普通组件,没有生命周期


  • 0

    class Post extends Component {
        handleClick(){
            //直接获取p元素的可视高度
            // let height1=this.p.clientHeight;
            //如果有同学想通过css来获取高度的话,可以用getComputedStyle,它获取的是最终应用在元素上的所有css属性对象
            //element.style只能获取style属性中的css样式,在这里会返回空
            let height=parseInt(window.getComputedStyle(this.p).height);
        }
        render () {
            const content='this.props';
            return (<p ref={(p)=>this.p=p}  onClick={this.handleClick.bind(this)}>{content}</p>)
        }
    }
    

  • 0

    class Post extends Component {
      static defaultProps={
        content:''
      };
      handleClick(){
        const h = this.p.clientHeight;
        console.log(h);
      }
      render () {
        return (<p ref={(p)=>this.p=p} content="sfdsfdf" onClick={this.handleClick.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    class Post extends Component {
    sayHeight(){
    console.log(this.dom.offsetHeight)
    }
    render () {
    return (
    <p onClick={this.sayHeight.bind(this)} ref={(p)=>{this.dom = p}}>
    {this.props.content}
    </p>)
    }
    }
    提交正确


  • 0

    class Post extends Component {
      static defaultProps = {
        content: ""
      }
      handleClick(){
        console.log(this.p.clientHeight)
      }
      render () {
        return (<p ref={(p) => this.p = p} onClick={this.handleClick.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    测试通过,给大家参考一下:

    class Post extends Component {
      constructor(){
        super();
        this.state = {
          content:''
        }
      }
      componentDidMount(){
        this.p.offsetHeight
      }
      handleClickOnBtn(){
        console.log(this.p.offsetHeight)
      }
      render () {
        return (<p ref = {(p) => {this.p = p}} onClick = {this.handleClickOnBtn.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    constructor(){
    super()
    // 设置 initial state
    this.state = {
    content:"我是文本,点击获取高度"
    }
    }
    componentDidMount(){
    this.p.offsetHeight
    }
    handleClickOnBtn(){
    console.log(this.p.offsetHeight)
    }
    render () {
    return (
    <p ref = {(p) => {this.p = p}} onClick = {this.handleClickOnBtn.bind(this)}>
    {this.state.content}
    </p>
    )
    }


  • 0

    class Post extends Component {
      handleClick(){
        console.log(this.p.clientHeight)
      }
      render () {
        return (<p ref={(p)=> this.p = p} onClick={this.handleClick.bind(this)}>{this.props.content}</p>)
      }
    }
    

  • 0

    为什么用state,高度总是和内容高度不一样,直接输出this.p.clientHeight就能正常通过了
    constructor() {
    super()
    this.state = {
    height: ''
    }
    }
    componentDidMount() {
    const height = this.p.clientHeight;
    this.setState({height})
    }
    handleClick() {
    console.log(this.state.height)
    }
    render() {
    return (
    <p ref={(p) => this.p = p} onClick={this.handleClick.bind(this)}>{this.props.content}</p>
    )
    }


  • 0

    0_1511850933861_upload-275b59de-aa03-4a6a-b779-d4b6ebf7c8d7

    0_1511850948205_upload-d48a541d-b519-47fe-9142-16a7a42f9010

    这是什么鬼???


  • 0

    class Post extends Component {
      render () {
        return (<p onClick={event=>console.log(event.target.scrollHeight)}>{this.props.content}</p>)
      }
    }
    

  • 0

    找到了 e 能发现好多的东西 233

    
    class Post extends Component {
      constructor(props){
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick(e){
        console.log(e.target.clientHeight)
      }
      render () {
        return (<p onClick={this.handleClick}>{this.props.content}</p>)
      }
    }
    
    

  • 0

    感觉没问题,但是就是打印不出高度

    class Post extends Component {
      constructor(props){
        super(props)
        this.state = {
          textHeight: ""
        }  
      }
      
      componentDidMount() {
        this.setState = {
          textHeight:  this.text.clientHeight
        } 
      }
      
      render () {
        return (
          <p ref = {p => this.text = p} onClick = {console.log(this.state.textHeight)}>{this.props.content}</p>
        )
      }
    }
    

  • 0

    class Post extends Component {
      handler(){
        console.log(this.p.clientHeight)
      }
      render () {
        return (<p ref={p => this.p = p} 
        onClick={this.handler.bind(this)}>
        {this.props.content}
        </p>)
      }
    }
    

  • 0

    class Post extends Component {
      constructor(){
        super();
      }
     print(){
        console.log(this.p.clientHeight)
      }
      render () {
        return (<p onClick = {this.print.bind(this)}  ref ={(p)=> this.p = p} >{this.props.content}</p>)
      }
    }
    
    

  • 0

    测试正常

    class Post extends Component {

      handleClick () {
        console.log(this.p.getBoundingClientRect().height)
       }

      render () {
          let {content} = this.props
         return (<p ref={p => this.p = p} onClick={this.handleClick.bind(this)}>{content}</p>)
      }
    }


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待