使用 JSON 配置动态渲染 React 组件

2020-06-09 08:00:00 · 飞浪

介绍您是否想过Wordpress、Wix等CMS的内部工作原理是什么？别再找了。本指南将通过讨论如何在构建简单表单组件时使用JSON配置动态呈现React组件，深入探讨CMS如何实现

介绍

您是否想过 Wordpress、Wix 等 CMS 的内部工作原理是什么？

别再找了。本指南将通过讨论如何在构建简单表单组件时使用 JSON 配置动态呈现 React 组件，深入探讨 CMS 如何实现其功能的基本部分。

首先，您需要：

自定义渲染器用于处理组件的渲染。这需要尽可能灵活，以便能够处理不同的用例或配置。
自定义渲染器的 JSON 配置。

渲染器

创建一个文件并将其命名为Renderer.js。这将用于渲染 JSON 配置，下一节将需要该配置。看一下 Renderer 组件及其功能：

      // Renderer.js
import React, { Fragment } from "react";

const mapPropsToConfig = config => {
  const configWithProps = [];

  config.forEach(item => {
    if (item.component) {
      const { component, ...props } = item;
      configWithProps.push({
        ...props,
        Component: component
      });
    }
  });

  return configWithProps;
};

export const Renderer = ({ config }) => {
  if (!config) {
    throw new Error('You are calling Renderer with no config.');
  }

  const configWithProps = mapPropsToConfig(config);

  const renderComponents = (items) => {
    return items.map(item => {
      const { Component, ...props } = item;
      return (
        <Fragment key={props.name}>
          <Component {...props} />
        </Fragment>
      );
    })
  }

  return renderComponents(configWithProps)
};
    

从上面的代码中，渲染器接受一个配置prop，它是一个对象数组。每个项目包括：

name：单独标识组件的唯一属性。
component：要渲染的 React 组件。

注意：对象中的任何其他属性都将作为 props 传递到组件中。其余代码非常简单。

接下来，创建需要传递给渲染器组件的配置。

配置

在制定正确的配置之前，您需要一个来自各个组件的组件图。您可以根据用例动态创建它们。

为了本指南的目的，您将构建一个简单的表单组件，其中包含全名、电子邮件地址和电话号码的输入字段。

首先，您需要创建名为InputField.js的输入字段组件，其内容如下：

      // InputField.js
import React from "react";

const InputField = ({ label, ...props }) => (
   <div> 
    {label ? <label htmlFor={props.id}>{label}</label> : null} 
    <input {...props} />  
  </div>
);

export default InputField;
    

最后，表单组件配置将包含以下内容：

      export const config = [
  {
    "name": "fullName",
    "id": "fullName",  
    "type": "text",
    "component": InputField,
    "value": "John Doe",
    "label": "Full Name"
  },
  {
    "name": "email",
    "id": "email",
    "type": "email",
    "component": InputField,
    "value": "john.doe@pluralsight.com",
    "label": "Email Address"
  },
  {
    "name": "phoneNumber",
    "id": "phoneNumber",
    "type": "tel",
    "component": InputField,
    "value": "12345678",
    "label": "Phone Number"
  },
]
    

综合起来

现在您已经创建了渲染器和配置，您可以渲染表单组件和一些交互了。

创建Form.js，内容如下：

      //Form.js
import { Renderer } from "./Renderer";
import { config } from "./config";

const Form = () => {
  return (
   <form>
      <Renderer config={config} />
   </form>
  )
};
    

上述代码仅渲染配置中定义的表单字段，而没有实际执行任何操作。您将在下一节中修复该问题。

交互性

为了给表单组件添加一些交互性，您需要修改config.js以接受配置状态和onChange处理程序。

      // config.js
import InputField from './InputField.js'

export const getConfig = ({ state, onChange }) => {
  return [
    {       
      name: "fullName",   
      id: "fullName",      
      type: "text",      
      label: "Full Name",      
      component: InputField,      
      value: state["fullName"],      
      onChange: onChange("fullName"), 
    },
    {  
      name: "email",      
      id: "email",      
      type: "text",      
      component: InputField,     
      label: "Email Address",      
      value: state["email"],      
      onChange: onChange("email"),    
   },
  {      
     name: "phoneNumber",      
     id: "email",      
     type: "tel",      
     component: InputField,      
     label: "Phone Number",      
     value: state["phoneNumber"],      
     onChange: onChange("phoneNumber"),    
  },
 ] 
}
    

您还必须更新表单组件以使用更新的配置文件：

      // Form.js
import React, { useState, useMemo } from "react";

import { Renderer } from "./Renderer";
import { getConfig } from "./config";

export const Form = () => {
  const [state, setState] = useState({ 
    fullName: "",
    email: "", 
    phoneNumber: "" 
  });

  const handleSubmit = e => {
     e.preventDefault(); 
     console.log("state", state);
  }

   const handleOnChange = field => event => {
      const { value } = event.target; 
      setState(prevState => ({  ...prevState,  [field]: value  }));
   }

   const config = useMemo(() => { 
     return getConfig({ state,  onChange: handleOnChange  });  
   }, [state]);

   return (     
     <form onSubmit={handleSubmit}>     
        <Renderer config={config} />      
        <button>Submit</button>    
     </form> 
   );
}
    

使用更新的表单组件文件（其中包含一些 React 状态和函数），您已成功创建具有交互性的动态表单。以下是该应用程序的 CodeSandbox链接。

结论

在本指南中，我们研究了如何通过构建一个简单的表单组件，使用自定义渲染器和 JSON 配置动态渲染 React 组件。

以下是一些有用的链接，可帮助您了解有关 React 组件动态渲染的更多信息：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 JSON 配置动态渲染 React 组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

// Renderer.js import React, { Fragment } from "react"; const mapPropsToConfig = config => { const configWithProps = []; config.forEach(item => { if (item.component) { const { component, ...props } = item; configWithProps.push({ ...props, Component: component }); } }); return configWithProps; }; export const Renderer = ({ config }) => { if (!config) { throw new Error('You are calling Renderer with no config.'); } const configWithProps = mapPropsToConfig(config); const renderComponents = (items) => { return items.map(item => { const { Component, ...props } = item; return ( <Fragment key={props.name}> <Component {...props} /> </Fragment> ); }) } return renderComponents(configWithProps) };

// InputField.js import React from "react"; const InputField = ({ label, ...props }) => ( <div> {label ? <label htmlFor={props.id}>{label}</label> : null} <input {...props} /> </div> ); export default InputField;

export const config = [ { "name": "fullName", "id": "fullName", "type": "text", "component": InputField, "value": "John Doe", "label": "Full Name" }, { "name": "email", "id": "email", "type": "email", "component": InputField, "value": "john.doe@pluralsight.com", "label": "Email Address" }, { "name": "phoneNumber", "id": "phoneNumber", "type": "tel", "component": InputField, "value": "12345678", "label": "Phone Number" }, ]

// config.js import InputField from './InputField.js' export const getConfig = ({ state, onChange }) => { return [ { name: "fullName", id: "fullName", type: "text", label: "Full Name", component: InputField, value: state["fullName"], onChange: onChange("fullName"), }, { name: "email", id: "email", type: "text", component: InputField, label: "Email Address", value: state["email"], onChange: onChange("email"), }, { name: "phoneNumber", id: "email", type: "tel", component: InputField, label: "Phone Number", value: state["phoneNumber"], onChange: onChange("phoneNumber"), }, ] }

// Form.js import React, { useState, useMemo } from "react"; import { Renderer } from "./Renderer"; import { getConfig } from "./config"; export const Form = () => { const [state, setState] = useState({ fullName: "", email: "", phoneNumber: "" }); const handleSubmit = e => { e.preventDefault(); console.log("state", state); } const handleOnChange = field => event => { const { value } = event.target; setState(prevState => ({ ...prevState, [field]: value })); } const config = useMemo(() => { return getConfig({ state, onChange: handleOnChange }); }, [state]); return ( <form onSubmit={handleSubmit}> <Renderer config={config} /> <button>Submit</button> </form> ); }