Как импортировать jsx с переменными состояния в другой реагирующий компонент?

Question

У меня есть компонент реагирования, и я хочу импортировать в него длинный код 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 должен быть «фиктивным» или функциональным (как они называются) компонентом React:

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

Таким образом, внешний файл будет выглядеть так:

import React from 'react';

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

export { X };

Компонент 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} /> 
        );
    }
}

Answer 2

Сделать 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}/>
 }
}