Как передать component как props?

Question

Как это правильнейшим образом сделать.

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';


class TheObject extends React.Component {
  constructor (props) {
    super ();
    this.shareable = props.shareable;
  }
}

class MyEditor extends React.Component {
  constructor (props) {
    super ();
    this.shareable = props.shareable;
  }
  render () {
    return (
      "<div>" + this.shareable + "</div>"
    );
  }
}

const anObject = <TheObject shareable="aValue" />;
console.log (anObject);
const anEditor = new MyEditor (anObject);
export default MyEditor;

Второе решение. Частичное либо полное определение/пере- компонента, например, в родительском компоненте React-а (т.е. без поиска/ref- дочернего, напрямую; если я правильно понимаю ref'ы).

MyEditor.js

import React from 'react';
import 'draft-js/dist/Draft.css';


class MyEditor extends React.Component {
  constructor (props) {
    super (props);
    this.props = props;
    this.shareable = this.props.shareable;
  }
  
  render () {
    return (
      <div shareable={this.shareable}>aaa</div>
    );
  }
}

export default MyEditor;

App.js

import React from 'react';
import 'draft-js/dist/Draft.css';
import MyEditor from './MyEditor'


class TheObject extends React.Component {
  render () {
    return (
      <MyEditor shareable="aValue" />
    );
  }
}

export default TheObject;

Answer 1

Чтобы передать компонент как пропс. Можно воспользоваться специальным пропсом children.

const TestCmp = ({children}) => {
  return (
    <p>Привет из тестового компонента</p>
    <div>{children}</div>
  )
}

const App = () => {
  return(
    <TestCmp>
      О, а это дочерний текст
    </TestCmp>

  )
}

В данном случае передается текст, но можно передавать и компоненты. Вот более обширная статья на эту тему. Там есть примеры с классовыми компонентами

БЛОГ НА HUSL

Как передать component как props?

Ответы (1 шт):