时间戳

首页 > 解决方案 > 在 ReactJS 中选择一个 DOM 元素

reactjs - 在 ReactJS 中选择一个 DOM 元素

问题描述

我在 ReactJS 世界中相对较新，我想知道如何从 jsx 中选择 h1 标签的内容。我尝试使用 refs，但事实证明，它适用于输入表单。有什么办法可以解决..！

render(){
        return(
            <div style={{width: '100%', margin: 'auto'}}>
                <Grid className = "landing-grid">
                    <Cell col={12}>
                        <img 
                            // src = "https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Bearded_Man-17-512.png"
                            src = "https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png"
                            alt = "avatar"
                            className = "avatar-img"
                            />
                        <div className="banner-text">
                            <h1>Full Stack Developer</h1>
                            <hr />
                            <p>JavaScript | React | NodeJS | Express | MongoDB | HTML/CSS | Python</p>
                            
                            <div className="social-links">
                                <a href="https://www.linkedin.com/in/shamant-bhimanagoud-naik" rel="noopener noreferrer" target="_blank">
                                    <i className="fa fa-linkedin-square" aria-hidden="true" />
                                </a>

                                <a href="https://github.com/sham1516/" rel="noopener noreferrer" target="_blank">
                                    <i className="fa fa-github-square" aria-hidden="true" />
                                </a>

                                <a href="https://twitter.com/ShamantN" rel="noopener noreferrer" target="_blank">
                                    <i className="fa fa-twitter-square" aria-hidden="true" />
                                </a>
                            </div>
                        </div>
                    </Cell>
                </Grid>
            </div>
        );
    }

我要动画

全栈开发人员

. 那么如何选择..！

标签： reactjsrenderjsx

解决方案

您不需要为此提供参考。您只需要设置组件状态，并在您的渲染方法中使用该状态。在这种情况下，状态只是一个数字，表示到目前为止我们已经获得的字符串有多远，渲染方法需要创建一堆跨度，并在其中一些上设置类。

以下是提取到可重用组件的方式：

class Fancy extends React.Component {
  constructor() {
    this.state = {
      index: 0,
    }
  }

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState(prev => ({ index: prev.index + 1 }));
    }, 50);
  }

  componentDidUpdate() {
    if (this.state.index >= this.props.text.length) {
      clearInterval(this.intervalId);
    }
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render () {
    const spans = [];
    for (let i = 0; i < this.props.text.length; i++) {
      spans.push((
        <span key={i} className={i < this.state.index ? 'fade' : undefined}>
          {this.props.text[i]}
        </span>
      ));
    }
    return (
      <React.Fragment>
        {spans}
      </React.Fragment>
    )
  }
}

像这样使用：

<div className="banner-text">
  <h1><Fancy text="Full Stack Developer" /></h1>

推荐阅读