函数在 render() 之外的 React 中不起作用

Question

我的函数在反应渲染函数之外不起作用。当我在渲染中使用没有函数的函数代码时，它可以工作。我在哪里做错了。

反应：

class App extends React.Component {
constructor(props) {
super(props);
this.state={
calcKeys:[
{
"key": "AC",
},
{
"key": "CE",
},
{
"key": "±",
},
{
"key": "/",
},
{
"key": "7",
},
]
};
this.displayKeys = this.displayKeys.bind(this);
}
displayKeys() {
<div className="display-keys"> 
<div className="screen">
<input type="text" />
</div>
{this.state.calcKeys.map(item=>
<button>{item.key}</button>
)}
</div>
}
render() {
return(
<div className="display-container">
<displayKeys />
</div> 
);
}
} 
ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

将返回关键字添加到显示键

displayKeys() {
return <div className="display-keys"> 
//...
</div>
}

并使用此 sintax 调用内部渲染函数：{this.displayKeys()}而不是<displayKeys/>。

不要使用<displayKeys/>因为 React 会将其视为一个独立的组件。如果这样做，则提取其他组件上的显示键。例如：

const Keys = ({calcKeys})=>(<div className="display-keys"> 
<div className="screen">
<input type="text" />
</div>
{calcKeys.map(item=><button>{item.key}</button>)}
</div>)
class App extends Component{
//...
render(){
return(
<div className="display-container">
<Keys calcKeys={this.state.calcKeys}/>
</div> 
);
}
}