Реагировать на добавление элемента программно с HOC - PullRequest
Новая
       23

Реагировать на добавление элемента программно с HOC

0 голосов
/ 31 мая 2019

Есть ли способ использования компонента высокого порядка для программного добавления элементов в компонент?Мне было интересно, есть ли способ использовать React.createElement для добавления дочерних компонентов?Вот код, который у меня есть: 

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

function addAnElement(WrappedComponent) {

  return class Enhancer extends WrappedComponent {

    render() {

      const elementsTree = super.render()

      // Programatically add a child? 
      // Update elementTree.props.children somehow?

      return elementsTree
    }
  }
}


class JustSomeText extends Component {
  render() {

    return (
      <div>
        <p>A long time ago, in a galaxy far, far away.</p>
        {/* I want to add an element here? */}
      </div>
    )
  }
}


function App() {

  const ExtendedComponent = addAnElement(JustSomeText)

  return (
    <div className="App">
      <ExtendedComponent />      
    </div>
  )
}

export default App

ReactDOM.render(<App />, document.getElementById('root'))

Меня также интересуют другие, более эффективные способы достижения того же результата.

1 Ответ

1 голос
/ 31 мая 2019

Самый простой способ добиться этого (хотя он и не использует HOC) - использовать опору children в React. 

class JustSomeText extends Component {
  render() {
    return (
      <div>
        <p>A long time ago, in a galaxy far, far away.</p>
        {this.props.children}
      </div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <JustSomeText>
         <p>more text!</p>
      </JustSomeText>
    </div>
  )
}

Будет отображаться следующее: 

<div className="App">
   <div>
      <p>A long time ago, in a galaxy far, far away.</p>
      <p>more text!</p>
   </div>
</div>

Подробнее об этом см. children - https://reactjs.org/docs/composition-vs-inheritance.html

.
...