Примите различные данные шаблона html в качестве параметров для компонента reactjs

Question

В reactjs как отобразить компонент с шаблоном html данных?

class Options extends React.Component {
    render() {
        const othList = [];

        [1, 2, 3, 4, 5].forEach((t) => {
            othList.push(t);
        });

        return othList;
    }
}

Как передать html данные и использовать предоставленный html в качестве шаблона?

<Options><div></div></Options>

Таким образом, приведенное выше будет отображать 5 делений в основном 1 et c .. или <Options><td></td></Options> будет отображать 5 тд

Спасибо

Answer 1

Опасно установить внутреннюю html

Если у вас есть html в качестве строки, вы можете использовать этот метод в реакции, чтобы установить ее в компоненте.

Из документов

function MyComponent() {
  return <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />;
}

В вашем коде (при условии, что othList представляет собой массив html шаблонов)

class Options extends React.Component {
    render() {
        const othList = [];

        [1, 2, 3, 4, 5].forEach((t) => {
            othList.push(t);
        });

        let activeTemplateIndex = 0;

        return <div dangerouslySetInnerHTML={{__html: othList[activeTemplateIndex]}} />;
    }
}