propsの渡し方について

Question

通常、reactでは属性のように記載することで値(props)を渡して表示しますが、
Homeを変数に定義して同様なことを実現する場合はどのように記載(constとrenderの両方)すればよいでしょうか？
※文法エラーなどがあるかもしれませんがご了承ください。

■やりたいこと
const Home = {

<div>{this.props.value}</div> }

render(){
return(
{Home}
);
}

■通常
render(){
return(
<Home value="aaa"/>
);
}

class Home extends React.Component {
render (){
return (
<div>{this.props.value}</div>
);
}
}

Answer 1

import React from 'react';
import { render } from 'react-dom';

class Home extends React.Component {

  render() {
    return (
      <div>{this.props.value}</div>
    )
  }

}

class App extends React.Component {

  // Q. Homeを変数に定義して同様なことを実現する場合はどのように記載(constとrenderの両方)すればよいでしょうか？
  // A. 以下が質問に対する回答部分になるのかなと。

  render() {

    const homeComponent = (
      <Home value='aaa' />
    );

    return homeComponent

  }

}

render(<App />, document.getElementById('root'));

https://codesandbox.io/s/m7wyj1677p

こういうことでしょうか？

Answer 2

指摘に合わせて修正してみました

import React from "react";
import { render } from "react-dom";


const App = ({ value }) => {
  const hello = <h1>これがやりたいことですかね？ {value}</h1>;
  return (
    <div>
      {hello}
    </div>
  );
};

render(<App value="aaa" />, document.getElementById("root"));

こちらに動く状態のコードがあります。
https://codesandbox.io/s/q784mvol79

Comments

[motikei55]

内容が分かりにくくて申し訳ありません。

元々render内で<div>this.props.xxx</div>などpropsを使用するタグが存在した場合、
それを定数で宣言したいです。

上記ソースの場合ですと、最終行を<App value="aaa"/>として、
const hello02のparam1にAppのthis.props.valueを渡したいです。

実行結果：これがやりたいことですかね？aaa

[motikei55]

{hello02}のような記述では無理で<hello02 value={this.props.value}/>のようにタグの記載にしないと値渡しは無理でしょうか？

[m0a]

修正してみましたのでご確認下さい。