Question

我有一个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>
)

Answer 1

将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}/>
 }
}

Answer 2

X应该是“虚拟”或功能性（即所谓的）React组件：

const X = ({displaying}) => (
  <div> {displaying} </div>
);

因此外部文件将如下所示：

import React from 'react';

const X = ({displaying}) => (
  <div> {displaying} </div>
);

export { X };

现在可以像其他任何React组件一样正常调用X组件，例如：

<X displaying="This is the text displayed" />

现在您可以像这样导入它：

import { X } from './pathToJSFile'

并在您的组件中使用它：

class CompA extends Component {
    constructor(props) {
        super(props);
        this.state.displaying = false;
    }


    render() {
        return( 
            <X displaying={this.state.displaying} /> 
        );
    }
}

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

2 个答案: