#11 获取文本的高度


  • 0

    class Post extends Component {
      showHeight () {
        const height = this.pEl.offsetHeight
        console.log(height)
      }
      render () {
        return (<p ref={pEl => this.pEl = pEl} onClick={this.showHeight.bind(this)}>{this.props.content}</p>)
      }
    }
    
    

  • 0

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

  • 0

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

    这样就通过了,谢谢 @yyssjj33 的代码。


  • 0

    @ScriptOJ

    代码如下,请问 这里把传进来的数据放到this.state中,在p中展示,
    提交结果为
    没有在p内正确显示

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

  • 0

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

  • 0

    @ScriptOJ
    class Post extends Component {
    handler(){
    // console.log(this.refs.pnode.clientHeight)
    console.log(+window.getComputedStyle(this.refs.pnode,null).height.slice(0,-2))
    }
    render () {
    return (<p ref='pnode' onClick={()=>this.handler()}>{this.props.content}</p>)
    }
    }


  • 0

    交作业~

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

  • 0

    class Post extends Component {
      getHeight = () => {
        console.log(this.refs.p.clientHeight)
      }
      render () {
        const { content } = this.props;
        return (<p ref='p' onClick={this.getHeight}>{content}</p>)
      }
    }
    
    

  • 0

    @yyssjj33#11 获取文本的高度 中说:

    componentDidMount

    应该是不要用 componentDidMount 这个,点击直接获取高度就可以通过


  • 0

    class Post extends Component {
      
      constructor () {
        super();
        this.p = Object.create(null);
      }
      
      getHeight () {
        console.log(this.p.offsetHeight)
      }
      
      render () {
        const { content } = this.props;
        return (
          <p onClick={this.getHeight.bind(this)} ref={(p => { this.p = p })}>
            { content }
          </p>
        )
      }
    }
    
    

  • 0

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

  • 0

    class Post extends Component {
      render () {
        return (
          <p ref={(p)=>this.p=p} onClick={()=>console.log(this.p.clientHeight)}>
             {this.props.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

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


  • 0

    export default class Post extends Component {

    render() {
        return (
            <p onClick={this.handleClick.bind(this)} ref={el => this.el = el}>
                {this.props.content}
            </p>
        )
    }
    
    handleClick() {
        console.log(this.el.getBoundingClientRect().height)
    }
    

    }


登录后回复
 

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