Question

我的React Native应用程序中有以下类（使用Typescript）：

class Component1 extends React.Component<IntroProps, {}> {
  constructor(props){
    super(props)
    console.log(props.onLayout)
  }
  ...
}

我在View类的文档中看到，任何View或从其继承的组件都具有this.props.onLayout。但是，此日志记录undefined，如果我使用this.props.onLayout而不是props.onLayout，则会发出警告“类型'Readonly＆Readonly <{children？的属性'onLayout'不存在： ReactNode;>'“。我见过其他一些在他们的组件中使用this.props.onLayout的人的例子，除了我的人使用TypeScript。

我想知道的事情：

为什么我不能在这里访问this.props.onLayout？如何访问它？

Answer 1

test所属视图，可以用作以下代码：

onlayout

您可以查看此article，在某些内容中，它显示了React.componet源代码并对其进行了分析。实际上，React.component是一种功能。

class Component1 extends React.Component<IntroProps, {}> {
  constructor(props){
    super(props)
  }
  render() {
   <View onLayout={this.props.onLayout} style={[{},this.props.containStyle]}>
      <Image source={{ uri: 'http://fillmurray.com/200/200' }} width={200} 
     height={200} />
      <Text>My Picture</Text>
    </View>
  }
  ...
} 
class Example extends Component {
  //this is a method
  onLayout = (e) => {
    this.setState({
      width: e.nativeEvent.layout.width,
      height: e.nativeEvent.layout.height,
      x: e.nativeEvent.layout.x,
      y: e.nativeEvent.layout.y
    })
  }

  render (
    <Component1  onLayout={this.onLayout} containerStyle={width:this.state.width}/>
  )
}

您想学习的越多，您可以看一下文章并阅读源代码。

为什么我的React Native组件不存在this.props.onLayout？

1 个答案: