React组件无法接收HTML传入的Props问题排查

首先咱们拆解下你遇到的核心问题：

为什么props是空对象？ #

你在Blade模板里直接用自定义HTML标签 <Ts> 传递属性，但这不符合React接收props的正确逻辑，主要有两个关键原因：

1. HTML属性大小写不敏感：浏览器会自动把所有属性名转换成小写，所以你写的 snakeCase 会变成 snakecase，ProperCase 变成 propercase，就算React能读取到，属性名也和你组件里期望的不匹配。
2. React不会自动映射HTML标签属性到props：当你用 ReactDOM.render(<Ts />, document.getElementById('ts')) 挂载组件时，React只会识别JSX代码里明确传递的props，完全不会读取宿主DOM元素（也就是你写的 <Ts> 标签）上的任何属性。

正确的解决方案 #

这里给你两种常用的解决方式，按需选择：

方案1：直接在ReactDOM.render中传递Props（推荐）

这种方式最符合React的设计规范，能完美保留属性名的大小写：

1. 修改Blade模板，把自定义的 <Ts> 标签换成普通容器div：

<html>
<head>
  <title>My TS</title>
</head>
<body>
  <div id="ts"></div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

2. 在你的 ts.js 文件里，修改 ReactDOM.render 部分，直接传入需要的props：

if (document.getElementById('ts')) {
  ReactDOM.render(
    <Ts 
      lowercase="onlylowercase" 
      snakeCase="justSnakeCase" 
      ProperCase="AndProperCase" 
    />, 
    document.getElementById('ts')
  );
}

如果属性值需要从Laravel后端获取，直接用Blade语法插入即可，比如：

<Ts 
  lowercase="{{ $lowercaseValue }}" 
  snakeCase="{{ $snakeCaseValue }}" 
  ProperCase="{{ $properCaseValue }}" 
/>

方案2：通过HTML data属性传递（适合必须保留HTML标签的场景）

如果你因为某些原因必须保留自定义标签，可以用HTML的 data-* 属性传递数据，然后在组件中手动读取：

1. 修改Blade模板：

<Ts 
  id="ts"
  data-lowercase="onlylowercase" 
  data-snake-case="justSnakeCase" 
  data-proper-case="AndProperCase"
></Ts>

2. 在 ts.js 的构造函数中，读取宿主元素的data属性：

constructor(props) {
  super(props);
  const element = document.getElementById('ts');
  const lowercase = element.dataset.lowercase;
  const snakeCase = element.dataset.snakeCase;
  const ProperCase = element.dataset.properCase;
  
  var expected = { lowercase:'Onlylowercase', snakeCase:'justSnakeCase', ProperCase: 'AndProperCase' };
  console.log("expected:",expected);
  console.log("read from data attributes:", { lowercase, snakeCase, ProperCase });
  
  this.state={'lowercase': lowercase};
}

然后修改挂载代码，不需要传递props了：

if (document.getElementById('ts')) {
  ReactDOM.render(<Ts />, document.getElementById('ts'));
}

额外的小问题修正 #

你的组件 render 方法里写的是 return NULL;，这里要改成小写的 null，不然会因为找不到名为 NULL 的变量而报错：

render() {
  return null;
}

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