javascript - 如何将带有状态变量的jsx导入另一个React组件？

我有一个react组件，我想将一个长长的JSX代码导入其中。但是，JSX具有包含this.state.example的变量。如何导入？

这是一个例子：

class CompA extends Component {
state={displaying:false}; render(){const {displaying}=this.state; return({x})}
}

将此文件导出到顶部？

export const x = (
<div>displaying</div>
)

最佳答案

使x成为无状态子组件。

//x.jsx
export const X = ({displaying})=>(
 <div>{displaying}</div>
)

import {X} from "./x.jsx";
class CompA extends Component {
 state={displaying:false};
 render(){
  const {displaying}=this.state;
  return <X displaying={displaying}/>
 }
}

关于javascript - 如何将带有状态变量的jsx导入另一个React组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53233312/