reactjs - 如何在函数中使用 React 组件？

Question

我有这段代码，在我的代码中我正在使用一个组件，这应该是可能的吗？

let newBox = document.createElement("span")
for (let a = 0; a < suggestions.length; a++) {
 let newDiv= <Option value={suggestions[a]}/>
 newBox.appendChild(newDiv)
}

item.appendChild(newBox)

这个组件只有这个:

import React, { useState } from 'react';

const Option = (value) => {
    return (<div className="divBorder"> {value} </div>)
}

export default Option

顺便说一句:我在这部分有这个错误:newBox.appendChild(newDiv)

这是错误:

TypeError: Node.appendChild: Argument 1 does not implement interface Node.

Answer 1

您需要了解 React 的 JSX 和“虚拟 DOM”如何工作。

诸如<Option value={suggestions[a]} />之类的东西用 JSX 编写，最终转译为 JS，等价结果为

React.createElement(Option, { value: suggestions[a] }, null)

现在你应该看到不可能将这样的东西直接附加到 DOM 中，它甚至不是一个有效的 DOM 元素!

它是一个 React 元素，又名虚拟 DOM 元素，它旨在由理解如何理解它的渲染器引擎使用。 react-dom lib是Web平台的引擎，可以有其他引擎。