javascript - react /JS : how to pass html element via function?

Question

假设我有:

const list_item = (key,str) => <li key={key}>{str}</li>

并且，在我的渲染函数中，

<li key={mykey}> {mystring} <MdCheckCircle /> </li>

但是，当我将 list_item 函数放入 render 方法中时，我无法添加 <MdCheckCircle/> :

list_item(mykey,mystring + "<MdCheckCircle/>")
// renders as string literal on the site

list_item(mykey,mystring + <MdCheckCircle/>) 
// renders as "[ Object ]" on the site

如何传递此 html 元素以使其正确呈现？

Answer 1

您可以像另一个参数一样将组件直接传递给函数

const list_item = (key, str, comp) => <li key={key}>{str} {comp}</li>;

const MdCheckCircle = () => <div>Circle</div>;

class App extends Component {
    render() {
        return <div>{list_item(1, "string", <MdCheckCircle />)}</div>;
    }
}