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

Question

我试图在Silverstripe CMS实例中的页面模板(page .ss)上呈现React.js组件。我有以下react组件:

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;

这将呈现到页面。ss (CMS模板)with:

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

并显示pageTitle的值(例如:"回家")正确。但是我希望能够做一些事情，比如:

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

…其中$Title是Silverstripe模板上的一个变量，它将返回"Home"。我怎么能得到的值从模板变量到我的react组件的道具?谢谢。

Answer 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属性。

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