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>;
    }
}

React / JS：如何通过函数传递html元素？

1 个答案: