ReactJSでpropsを使ってHTMLタグを動的にレンダリングする方法

2024-04-02

ReactJSでHTMLタグをpropsに渡す方法

JSX内で直接渡す

最も簡単な方法は、JSX内でHTMLタグを直接propsとして渡す方法です。

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  return (
    <MyComponent html={html} />
  );
};

この方法では、dangerouslySetInnerHTMLを使用して、HTMLタグを文字列として渡します。ただし、この方法を使用する場合は、XSS脆弱性などのセキュリティリスクに注意する必要があります。

React.Children.toArrayを使用して、子要素を配列に変換してからpropsとして渡す方法もあります。

const MyComponent = ({ children }) => {
  return (
    <div>{children}</div>
  );
};

const App = () => {
  return (
    <MyComponent>
      <p>Hello World!</p>
    </MyComponent>
  );
};

この方法では、childrenという特別なpropsを使用して、子要素を受け取ることができます。

カスタムコンポーネントを使う

HTMLタグを再利用したい場合は、カスタムコンポーネントを作成して、そのコンポーネントをpropsとして渡す方法もあります。

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  return (
    <MyComponent>
      <MyComponent html={html} />
    </MyComponent>
  );
};

この方法では、HTMLタグをカプセル化して、再利用性を高めることができます。

スプレッド構文を使う

React 16以降では、スプレッド構文を使用して、オブジェクトをpropsとして渡すことができます。

const MyComponent = ({ html }) => {
  return (
    <div {...html} />
  );
};

const App = () => {
  const html = {
    dangerouslySetInnerHTML: {
      __html: '<p>Hello World!</p>',
    },
  };
  return (
    <MyComponent {...html} />
  );
};

この方法では、dangerouslySetInnerHTMLなどのプロパティを直接propsとして渡すことができます。

ReactJSでHTMLタグをpropsに渡すには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解して、状況に応じて適切な方法を選択してください。

JSX内で直接渡す

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  return (
    <MyComponent html={html} />
  );
};

React.Children.toArrayを使う

const MyComponent = ({ children }) => {
  return (
    <div>{children}</div>
  );
};

const App = () => {
  return (
    <MyComponent>
      <p>Hello World!</p>
    </MyComponent>
  );
};

カスタムコンポーネントを使う

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  return (
    <MyComponent>
      <MyComponent html={html} />
    </MyComponent>
  );
};

スプレッド構文を使う

const MyComponent = ({ html }) => {
  return (
    <div {...html} />
  );
};

const App = () => {
  const html = {
    dangerouslySetInnerHTML: {
      __html: '<p>Hello World!</p>',
    },
  };
  return (
    <MyComponent {...html} />
  );
};

これらのコードを参考に、ReactJSでHTMLタグをpropsに渡す方法を試してみてください。

dangerouslySetInnerHTMLを使用して、HTMLタグを文字列としてpropsとして渡すことができます。

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  return (
    <MyComponent html={html} />
  );
};

ただし、この方法を使用する場合は、XSS脆弱性などのセキュリティリスクに注意する必要があります。

const MyComponent = ({ children }) => {
  return (
    <div>{children}</div>
  );
};

const App = () => {
  return (
    <MyComponent>
      <p>Hello World!</p>
    </MyComponent>
  );
};

カスタムコンポーネントを使う

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  return (
    <MyComponent>
      <MyComponent html={html} />
    </MyComponent>
  );
};

スプレッド構文を使う

const MyComponent = ({ html }) => {
  return (
    <div {...html} />
  );
};

const App = () => {
  const html = {
    dangerouslySetInnerHTML: {
      __html: '<p>Hello World!</p>',
    },
  };
  return (
    <MyComponent {...html} />
  );
};

React.cloneElementを使用して、既存の要素を複製し、新しいpropsを追加して渡す方法もあります。

const MyComponent = ({ html }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
};

const App = () => {
  const html = '<p>Hello World!</p>';
  const element = <MyComponent />;
  return (
    <React.cloneElement element={element} html={html} />
  );
};