Question

我有一个这样的React应用

import Modal from 'some-component'


class Blog extends React.Component {



render () { 
 <Modal title='' content='' onOk='' onClose=''/> 
 <SomeComponent> </SomeComponent>
}

}

我正在尝试使用一个单独的函数来渲染模式，并像这样在render方法中调用该函数

...
renderModal = () => {}

render() {
 // call renderModal here
 <SomeComponent> </SomeComponent>
}

但这不起作用

Answer 1

renderModal = () => {
return (........your html....);
}
render () {
   {this.renderModal()};
}

您可以使用此代码来了解您的要求。

Answer 2

render () { 
  return (
   <Modal title='' content='' onOk='' onClose=''/> 
   <SomeComponent> </SomeComponent>
  )
}

您应该将它们包装在父元素=>

中

render () {
  return (
     <>
      <Modal title='' content='' onOk='' onClose=''/> 
      <SomeComponent> </SomeComponent>
     </>
  )
}

然后您可以使用

renderModal = () => <Modal title='' content='' onOk='' onClose='' />

render () { 
 return (
  <>
   {this.renderModal()}
   <SomeComponent> </SomeComponent>
  </>
  )
 }

如何在render方法中渲染组件？

2 个答案: