Question

以下解决方案......

我有一个动画组件：

const CSSAnimation = require('./cssanimation.js');

export default class Animation extends Component {

     ..............

    componentWillMount() {
    let clientId = this.props.clientId;
    this.createSlideShow(clientId)
    }

   createSlideShow(clientId) {
    let results = [];
    slides.map(function (slide, index) {
        results.push(
            <div key={ index } className="slide" ref="slide">
            .......
            </div>
         );
    }.bind(this));
    this.setState({slideShow: results});
    let slideRef = this.refs.slide;  <--- returns undefined
    new CSSAnimation(slideRef)

     ...........................

    render() {
    return (
        <div id="Animation" className="datatable sam" ref="Animation">
            { this.state.slideShow }
        </div>
    )
   }
  );
 }
}

“cssanimation.js”是一个纯javascript第三方文件，只需要1个东西，className为'slide'的节点。

变量slideRef未获取refs元素且未定义。

有人看到我的错误吗？

先谢谢

更新：

我现在知道为什么我会收到错误，但我还不知道如何纠正错误。   显然，除非直接在render方法中，否则不要使用ref。

Answer 1

我根据文档收到的错误是出于以下原因之一：
1. The application has multiple react modules in the build.
2. The ref attribute is not being used w/in the render method.

我的问题是＃2。

我在render函数中移动了整个createSlideShow（）方法内容，但后来又出现了另一个错误： 你无法在渲染函数中更新状态 。 / p>

所以，对我来说，我取消了state.slideShow并且只使用了结果，如下所示......

render() {

      let results = [];
      slides.map(function (slide, index) {
        results.push(
        <div key={ index } className="slide" ref="slide">
        .......
        </div>
      );
     }.bind(this));

   return (
        <div id="Animation" className="datatable sam" ref="Animation">
            { results }
        </div>
    )
  }


   componentDidMount() {
       let slideRef = this.refs.slide; // returns back with "slideRef = div.slide"     
       new CSSAnimation(slideRef);
   }

ReactJs 0.14 - 不变违规：addComponentAsRefTo（...）：只有ReactOwner可以有refs

1 个答案: