react: 从父组件调用子组件的方法

Question

我在 react native 中有一个 ScrollView，它有很多视图。我使用以下代码存储要查看的参考

cards.push(
  <Card
    ref={(ref) => {
      console.log(ref);
      this.cardRef[index] = ref;
      ref.testMethod();
    }} />
);

卡片是一个单独的组件，如下所示：

class Card extends Component {
  constructor(props) {
    super(props);

    this.testMethod = this.testMethod.bind(this);
  }

  testMethod() {
    console.log('this.is.test.method');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>This.is.a.card</Text>
      </View>
    )
  }
}

但是它说 testMethod 是未定义的，不能调用 ref.testMethod()。

Answer 1

我在 jsfiddle 上玩过你的代码，看起来好像调用了子方法：

var Card = React.createClass({
  testMethod() {
    console.log('this.is.test.method');
  },
  render() {
    return (
      <h1>this is a card.</h1>
    )
  }
});

var Parent = React.createClass({
    render: function() {
        return <div><Card ref={(r) => {r.testMethod()}}/></div>;
    }
});

ReactDOM.render(
    <Parent />,
    document.getElementById('container')
);

https://jsfiddle.net/vq110d69/