假设我有:
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元素以使其正确呈现?
答案 0 :(得分:3)
您可以将组件直接传递给函数,就像另一个参数
一样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>;
}
}