如何将动态html元素注入到next.js页面? [英] how can injection dynamic html element to page with next.js?

问题描述

如何动态地将html元素注入next.js页面?这些未知元素的类型为(输入，复选框，img，...).用api指定的返回json类型的元素，如下所示:

how can dynamic injection html element to page with next.js? that these elements Unknown type like(input, checkbox, img,...). this element specified with api that return json type like this:

[{
   "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>
   )
}

结果为空，表示没有任何意义.

result is null, mean nothing for presentation.

问题是，我做对了吗?有更好的方法吗?

the question is, Do I do the right thing? Is there a better way?

推荐答案

发生的事情是，在getInitialprops中将道具从服务器传输到客户端的过程中，JSON已序列化，因此功能并未真正序列化.参见 https://github.com/zeit/next.js/issues/3536

What happens is that during the transfer of props from server to client in getInitialprops, JSON is serialized and so functions are not really serialized. See https://github.com/zeit/next.js/issues/3536

您最好的选择是将测试数据转换为HTML数据字符串，然后使用dangerouslySetInnerHTML注入.一个例子是:

Your best bet is to convert the test data into a string of HTML data and inject it using dangerouslySetInnerHTML. An example will be:

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

The catch with this is that the string you return must be a valid HTML (not JSX). So notice I used class instead of className

您可以在此处了解更多信息: https://reactjs.org/docs /dom-elements.html#dangerouslysetinnerhtml

You can read more about it here: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

这篇关于如何将动态html元素注入到next.js页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！