且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

TestCafé+ React JSX错误(意外令牌)

更新时间:2022-06-12 03:47:08

好,我解决了这个问题.万一有人落在这里.

Ok, I worked out the issue. in case anyone else lands here.

在React网站上,您可以在函数中返回一些JSX.当您需要一些简单的html代码并且不想为其创建整个组件时(例如在传递自定义reCharts刻度时),这非常方便.使用测试咖啡馆时,您无法执行此操作.相反,您需要确保所有jsx都在其自己的类组件中.

On a react site, you can return some JSX in a function. This is handy when you need some simple html code, and don't want to create an entire component for it (such as when passing in a custom reCharts tick). When using test Café, you can't do this. Instead, you need to make sure all the jsx is in its own class component.

您仍然可以执行上述快捷方式,但前提是该函数本身在组件内部.

you CAN still do the above mentioned shortcut, but only if the function itself is inside a component.

即 不好(在react中有效,但在testCafé中无效)

i.e. BAD (it's valid in react, but NOT with testCafé)

// in the chart component, you may have a custom tick element
<XAxis dataKey={label} tick={customizedAxisTick} />

// which, can look like this:
export const customizedAxisTick = (props) => {
  const {
    payload = {}
  } = props || {};
  return (
    <div>
      custom stuff using the passed payload
    </div>
  );
};

好的:相反,只需使其成为自己的类组件

GOOD: Instead, just make it its own class component

// reference the new component, instead of a function that returns the jsx.
<XAxis dataKey={label} tick={<AxisTick />} />

// i.e.
class AxisTick extends React.Component {
  ...

  render () {
    <div>
      custom stuff using the passed payload
    </div>
  }
}