从 CMS 模板变量 (SilverStripe) 中获取值到 React.js 组件道具中答案

【问题标题】：Get value from CMS template variable (SilverStripe) into React.js component props从 CMS 模板变量 (SilverStripe) 中获取值到 React.js 组件道具中
【发布时间】：2022-06-20 08:03:17
【问题描述】：

我正在尝试在 Silverstripe CMS 实例中的页面模板 (Page.ss) 上呈现 React.js 组件。我有以下反应组件：

import styles from './myComponent.module.scss';

type Props = {
  pageTitle?: string;
};


const ExampleReactComponent = ({ pageTitle = 'Home'}: Props): JSX.Element => {
  return (
    <div className={styles['example-sync-component']}>
      This is a React component. Here is a prop: <em>{pageTitle}</em>
    </div>
  );
};


export default ExampleReactComponent;

这会呈现到 Page.ss（CMS 模板）中：

<div data-component="my-component"></div>

并正确显示 pageTitle 的值（例如 'Home'）。但我希望能够做类似的事情：

<div data-component="my-component" data-page-title="$Title"></div>

... 其中 $Title 是 Silverstripe 模板上的一个变量，它将返回“Home”。如何从模板变量中获取值到我的反应组件的道具中？谢谢。

【问题讨论】：

我认为您可能需要使用Injector

标签： reactjs react-props silverstripe

【解决方案1】：

如果您想将数据属性传递给您的道具，您可以使用element.dataset 属性。

dataset 属性提供对元素上定义的任何data-* 属性的访问。

<div data-component="my-component" data-page-title="$Title.ATT"></div>

<script>
  const elements = document.querySelectorAll('[data-component]');

  for (const element of elements) {
    console.log(element.dataset);
  }
</script>

这将输出DOMStringMap {component: 'my-component', pageTitle: 'Home'}

请注意，数据属性的名称已从 kebab-case 转换为 camelCase。

因此，无论您在哪里调用 ReactDOM.render，您都可以将 dataset 属性作为组件属性传递。

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import ExampleReactComponent from '../components/ExampleReactComponent';

const componentMap = {
  'my-component': ExampleReactComponent,
};

function initializeInlineComponents() {
  const elements = document.querySelectorAll('[data-component]');

  for (const element of elements) {
    const {
      component,
      ...props,
    } = element.dataset;

    const Component = componentMap[component];

    ReactDOM.render(<Component {...props} />, element);
  }
}

initializeInlineComponents();

关于将数据呈现为属性的最后一点，您应该确保使用 [ATT 属性。

$Field.ATT 将确保该字段是 XML 编码的，以便放置在 HTML 元素属性中。这将在值上调用 htmlentities（即使已经转换为 HTML）并转义引号。

【讨论】：