如何在div元素中调用函数并使其返回多个HTML属性？

你当前的写法不符合JSX语法规范，要实现需求得这么做：

1. 先编写拆分函数，返回包含目标属性的对象：

const splitValue = (propValue) => {
  // 根据实际业务规则拆分propValue，这里以按'-'分割为例
  const [val1, val2] = propValue.split('-');
  return {
    'splitted-value1': val1,
    'splitted-value2': val2
  };
};

2. 在JSX中使用展开运算符，把函数返回的对象属性展开到元素上：

<div {...splitValue(propValue)} />

这样当propValue传入对应值时，就会生成你期望的HTML结构：

<div splitted-value1='val1' splitted-value2='val2' .../>

内容的提问来源于stack exchange，提问作者jdiablo