Question

有没有一种使用高阶组件将元素以编程方式添加到组件的方法？我想知道是否有一种使用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'))

我也对实现相同结果的其他更有效的方法感兴趣。

Answer 1

最简单的方法（尽管它不使用HOC）是在React中使用children道具。

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-django management command

的更多详细信息，请参考

使用HOC以编程方式添加元素

1 个答案: