Question

我有以下代码

class Iframe extends Component {
  constructor (props) {
    super()
    this.state = {
      iFrameHeight: '0px',
    }
    this.iFrameUrl = props.url
  }

我想访问如下所示的render函数中的道具：

render (props) {
  return (
    <iframe
      style={{width: '100%', height: this.state.iFrameHeight, overflow: 'visible'}}
      onLoad={() => {
        const obj = ReactDOM.findDOMNode(this)
        this.setState({
          'iFrameHeight': obj.contentWindow.document.body.scrollHeight + 'px'
        })
      }}
      ref='iframe'
      src={props.url}
      width='100%'
      scrolling='no'
      frameBorder='0'
      sandbox='allow-same-origin allow-scripts'
    />
  )
}

我正在从道具中获取iframe的src URL。在渲染的return方法中访问道具的正确方法是什么？

Answer 1

如果您在构造函数中接受props，则还需要将其传递给父组件。（在这种情况下，class Iframe extends Component { constructor (props) { super(props); ... }）

this.props.url     //any key in your prop

一旦安装到位，您可以随时通过简单的使用

在任何组件函数/生命周期挂钩/渲染方法中引用道具。

constructor (props) { super(props); this.state = { iFrameHeight: '0px', } this.iFrameUrl = this.props.url }

现在，在您的构造函数中使用this.props.url

this.frameUrl

如果要修改url，请在render方法中使用this.props.url，否则可以在render方法中直接使用{{1}}。

Answer 2

您只使用this.props，如果要在JSX中使用它，请确保用花括号将其包裹起来。

 render () {
      console.log(this.props) // this is how to use props inside render method
      return (
        <iframe
          style={{width: '100%', height: this.state.iFrameHeight, overflow: 'visible'}}
          onLoad={() => {
            const obj = ReactDOM.findDOMNode(this)
            this.setState({
              'iFrameHeight': obj.contentWindow.document.body.scrollHeight + 'px'
            })
          }}
          ref='iframe'
          src={props.url}
          width='100%'
          scrolling='no'
          frameBorder='0'
          sandbox='allow-same-origin allow-scripts'
        />
      )
    }

如何在渲染功能中访问道具

2 个答案: