假设我有:
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 元素以使其正确呈现?
最佳答案
您可以像另一个参数一样将组件直接传递给函数
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>;
}
}
关于javascript - react /JS : how to pass html element via function?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49367592/