在React JSX中,似乎不可能执行以下操作:

render: function() {
  return (
    <{this.props.component.slug} className='text'>
      {this.props.component.value}
    </{this.props.component.slug}>
  );
}

我得到一个解析错误:意外的标记{.这不是什么react 吗

我正在设计这个组件,以便在后台,存储在this.props.component.slug中的值将包含有效的HTML元素(h1、p等).有什么办法可以让这一切顺利进行吗?

推荐答案

你不应该把组件slug放在大括号里:

var Hello = React.createClass({
    render: function() {
        return <this.props.component.slug className='text'>
            {this.props.component.value}
        </this.props.component.slug>;
    }
});

React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body);

这是一把小提琴:http://jsfiddle.net/kb3gN/6668/

此外,您还可以发现JSX编译器有助于调试此类错误:

Reactjs相关问答推荐

如何等待我的插入内容提交后再继续执行指令?

react 派生状态未正确更新

404使用GitHub操作部署Next.js应用程序时出错

Reaction-路由v6动态路径RegExp

下拉Tailwind CSS菜单与怪异beviour

需要特定的数学函数来标准化动画持续时间

无法使用Reaction日期选取器和Next.js设置初始日期

用于获取带有事件处理程序的API的动态路由

蚂蚁 Select .列表弹出窗口不会';有时不会出现

在 useSelector() 中使用 array.map() 如何导致组件在分派操作时重新渲染?

在 React 中将 MUI 样式外包到单独的文件中?

如何到达类组件中的状态?

FlatList 不在 React Native 中呈现项目

React v6 中的公共和私有路由

为什么 setState 在 React 中不是异步的?

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

我刚刚部署了我的 Vite React 站点,但我的图标/图像没有部署

使用 react-router-dom 时弹出空白页面

MUI 卡组件上的文本未正确对齐

找不到元素 - 这是参考问题吗?