自定义jsx

因为目前的低代码配置满足不了一些定制化场景的需要，类似于表格单元格的内容，步骤条的内容等，需要可以自定义内容展示，我们在渲染函数中增加可返回jsx语法，便于用户自定义渲染内容。

Vue中使用jsx注意点

1、事件处理：在 JSX 中，你需要使用 on 前缀来监听事件，而不是 v-on。例如，使用 onClick 而不是 v-on:click

<button onClick={this.handleClick}>Click me</button>

2、v-for：在 JSX 中，你不能直接使用 v-for 指令。你需要使用 JavaScript 的 map 函数来遍历数组。

{this.items.map(item => <li>{item}</li>)}

3、v-model：在 JSX 中，你不能直接使用 v-model 指令。你需要手动实现数据双向绑定。例如，使用 value 属性和 input 事件

<input
  value={this.message}
  onInput={event => {
    this.message = event.target.value;
  }}
/>

4、v-show：在 JSX 中，你不能直接使用 v-show 指令。你需要使用 style 属性来控制元素的显示和隐藏。

<div style={{ display: this.isVisible ? 'block' : 'none' }}></div>

5、v-html 和 v-text：在 JSX 中，你不能直接使用 v-html 和 v-text 指令。你需要使用 innerHTML 属性和 {} 表达式

<div innerHTML={this.htmlContent}></div>
<p>{this.textContent}</p>

6、样式

style 方式：

<div style="background: #fff"></div>

class 方式： 在组件的自定义样式配置中添加 class, 例如：

:rootnode {
  .custom-style {
    background: #fff;
  }
}

自定义渲染函数示例

function render(ctx, params) {
  const spanClick = () => {
   ctx.setState({
        text: "hello!!!"
    });
  }
  return (<div>
  <span style={{color: "pink"}}>{params.item.title}</span>
  <span style={{color: "purple"}} onClick={spanClick}>
    {ctx?.state?.text}
    <i>hahah</i>
  </span>
  </div>)
}