Javascript 未捕获类型错误：无法读取属性'；价值'；空值（通过其他组件的组件id）

我有一个文本框组件

import React,{ Component } from 'react';
export default class Textbox extends Component {
      render() {   return (<input /> )}
    }

import React，{Component}来自'React'；
导出默认类Textbox扩展组件{
render（）{return（）}
}

snippest的另一个组成部分是

import Textbox from '../forms/Textbox.jsx'

export default class LoginPage extends Component {
  render(){

return (
   <Textbox type="tel" id="login-mobile" required/>

 )}
}   

从“../forms/Textbox.jsx”导入文本框
导出默认类LoginPage扩展组件{
render（）{
返回(
)}
}   

控制台显示id的输入为null，HTML视图为空

<input class="not-empty">

---

我不确定你在尝试什么，但你像道具一样将id发送到组件TextBox，因此如果你想通过道具将id发送到TextBox，你必须在TextBox render中设置-

你应该在

中正确设置id/类型，而不是在LoginPage的呈现中。整个代码看起来-

import Textbox from '../forms/Textbox.jsx'

export default class LoginPage extends Component {
  render(){

return (
   <Textbox type="tel" id="login-mobile"/>

 )}
}   

从“../forms/Textbox.jsx”导入文本框
导出默认类LoginPage扩展组件{
render（）{
返回(
)}
}   

和文本框-

 import React,{ Component } from 'react';
    export default class Textbox extends Component {
          render() {   return (<input id={this.props.id} type={this.props.type} /> )}
        }

import React，{Component}来自'React'；
导出默认类Textbox扩展组件{
render（）{return（）}
}

我认为这将帮助您：

道具和状态是相关的。一个组件的状态通常会成为子组件的支柱。道具传递给孩子的方式如下：

<MyChild name={this.state.childsName} />

---

你能说得更清楚一点吗？答案是，谢谢你的合作@WitVault。另外，只要所有道具都是有效的HTML输入属性，你就可以使用排列操作符。React将对传递给内置组件（如输入）的非标准道具发出警告。

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

handleName: function(newName) {
   this.setState({ childsName: newName });
}