自定义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;
  }
}

7、插槽 示例如下：

function render(ctx, params) {
  // 返回jsx渲染内容
  const {
    Button,
    Icon
  } = ctx.com;

  return <Button type="primary">{{
      default: () => '按钮',
      icon: () => <Icon icon="icon-question-circle" />
    }}</Button>
}

内置基础组件使用

Button

function render(ctx, params) {
  // 返回jsx渲染内容
  const {
    Button
  } = ctx.com;
  const btnClick = () => {
    console.log("按钮点击")
  }
  // 按钮属性与arco按钮属性一致
  return <Button type="primary" onClick={btnClick}>按钮</Button>
}

Tag

function render(ctx, params) {
  // 返回jsx渲染内容
  const {
    Tag
  } = ctx.com;
  
  // 标签属性与arco标签属性一致
  return <Tag color="green">标签</Tag>
}

Icon

function render(ctx, params) {
  // 返回jsx渲染内容
  const {Icon} = ctx.com;

  return <Icon icon="icon-heart-fill" size="20" color="red"></Icon>
}

Switch

function render(ctx, params) {
  // 返回jsx渲染内容
  const {
    Switch
  } = ctx.com;

  const changeOpen = (v) => {
    ctx.setState({
      open: v
    })
  }

  return <Switch model-value={ctx.state.open} onChange={(v) => changeOpen(v)}></Switch>
}

Input

function render(ctx, params) {
  // 返回jsx渲染内容
  const {
    Input
  } = ctx.com;

  const changeValue = (v) => {
    ctx.setState({
      inputValue: v
    })
  }

  return <Input model-value={ctx.state.inputValue} onInput={(v) => changeValue(v)}></Input>
}

Tooltip

function render(ctx, params) {
  // 返回jsx渲染内容
  const {
    Tooltip,
    Icon
  } = ctx.com;

  return <Tooltip content="这是提示内容">
    <Icon icon="icon-question-circle" />
  </Tooltip>
}

自定义渲染函数示例

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>)
}