![](/img/trans.png)
[英]How to build custom / dynamic routing in Next.js React Framework
[英]how can injection dynamic html element to page with next.js?
如何使用next.js动态注入html元素页面? 这些元素未知类型(输入,复选框,img,...)。 这个元素用api指定,返回json类型,如下所示:
[{
"id":"rooms",
"title":"Rooms",
"order":1,
"type":"string",
"widget":"select",
"data":[{
"Id":18,
"ParentId":null,
"Title":"One",
"Level":null,
"Childrens":[]
},
{"Id":19,
"ParentId":null,
"Title":"Two",
"Level":null,
"Childrens":[]
},
{"Id":20,
"ParentId":null,
"Title":"Three",
"Level":null,
"Childrens":[]
}]
},
{
"id":"exchange",
"title":"Exchange",
"order":0,
"type":"boolean",
"widget":"checkbox",
"data":[]
}]
我的尝试是:
Index.getInitialProps = async function({req, query}) {
const res= await fetch('url api')
var elements= await res.json()
var test = () => (
<div>
{...... convert json to html elements.......}
</div>
)
return {
test
}
})
function Index(props) {
return(
<a>
{props.test}
</a>
)
}
结果为null,对于表示没有任何意义。
问题是,我做对了吗? 有没有更好的办法?
发生的事情是,在getInitialprops
从服务器到客户端传递道具期间,JSON被序列化,因此函数不是真正序列化的。 请参阅https://github.com/zeit/next.js/issues/3536
最好的办法是将测试数据转换为HTML数据字符串并使用dangerouslySetInnerHTML
注入。 一个例子是:
class TestComponent extends React.Component {
static async getInitialProps() {
const text = '<div class="homepsage">This is the homepage data</div>';
return { text };
}
render() {
return (
<div>
<div className="text-container" dangerouslySetInnerHTML={{ __html: this.props.text }} />
<h1>Hello world</div>
</div>
);
}
}
这样做的结果是你返回的字符串必须是有效的HTML(而不是JSX)。 所以请注意我使用了class
而不是className
你可以在这里阅读更多相关信息: https : //reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.