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

Question

我有一个反应原生的ScrollView,它有很多视图.我使用以下代码存储ref以进行查看

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/