Question

调用React.createElement(...)的结果是一个对象，类似于：

{
    $$typeof: Symbol(react.element),
    key: null,
    props: {children: Array(2)},
    ref: null,
    type: "div",
    _owner: null,
    _store: {validated: true},
    _self: null,
    _source: null,
    __proto__: Object
}

我认为这是React的虚拟DOM中DOM元素的表示（请让我知道这是否不正确）。

在创建用于向页面动态添加元素的功能时，我错误地尝试了在状态对象中保留一组react元素：

class Form extends Component {
  constructor(props) {
    super(props)
    this.state = { things: [], count: 0 }
  }
  updateForm(obj, cb) {...} 
  render() {
    return (<>
        {this.props.render({
          updateForm: this.updateForm.bind(this),
          ...this.state
        })}
    </>)
  }
}

const makeThing = props =>
  <div>
    I am a thing. count is: {props.count}
  </div>

const App = () =>
  <Form 
  render={
    props => (
      <div>
        {props.things.map(t => t)} // RENDERING ELEMENTS DIRECTLY
        <button onClick={() => props.updateForm({things: [...props.things, makeThing(props)]})}>Add thing</button>
        <button onClick={() => props.updateForm({count: props.count + 1})}>Increase count</button>
      </div>
    )
  } />

我随后了解到，将预先创建的react元素指定为某个组件的子代并不是一个好主意。

为什么甚至有可能？当然，在任何情况下我实际上都不想这么做……应该出错吗？

Answer 1

我看不到您发布的内容有任何问题。您可以随时随地随意创建组件，也可以随意传递它们。它们只是对象，因此您可以根据需要进入状态。

唯一需要注意的是，传递viewData和处理程序，然后在实际需要的时候使用它来呈现组件，这样效率更高（在关注点分离方面更好）。

为什么可以将React元素（JavaScript对象）指定为React组件的子级？

1 个答案: