web-dev-qa-db-ja.com

ネストされたReactコンポーネントがレンダリングされないのはなぜですか？

Reactコンポーネント。コンポーネントのネストされた子ControlPanelはレンダリングされていないようです。ここにコードがあります。

class App extends Component {
  render() {
    return (
      <div className="App">
        <ControlPanel>
          <CustomerDisplay />
        </ControlPanel>
      </div>
    );
  }
}

このファイルの先頭には次の2行があります。

import ControlPanel from './components/control_panel';

import CustomerDisplay from './components/customer_display';

そして、ここに私のControlPanelコンポーネントがあります：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.scss';

const ControlPanel = () => {
    return (
      <div className="control_panel" id="control_panel">

      </div>
    );
}

export default CSSModules(ControlPanel, styles);

私が試してみました：

  • コンポーネントを完全なHTMLタグとして呼び出す（開始と終了）
  • CustomerDisplayコンポーネント内のControlPanelコンポーネントのネスト（ControlPanelのindex.jsxファイル内）

コンポーネントのネストが可能であることを知っています。私はそれを見ました。何らかの理由でそれは私にはうまくいきません。

javascriptreactjscreate-react-app
15
MddHtt13

コンポーネントが子を含み、正しくレンダリングできるようにするには、this.props.childrenを使用する必要があります。 React documentation ：で説明されているように、これは子としてすべてのコンポーネントにプロップとして渡され、コンポーネントの子を含みます：

封じ込め

一部のコンポーネントは、事前に子を認識しません。これは、一般的な「ボックス」を表すSidebarやDialogなどのコンポーネントで特に一般的です。

そのようなコンポーネントは、特別なchildren propを使用して、子要素を出力に直接渡すことを推奨します：

function FancyBorder(props) {
    return (
      <div className={'FancyBorder FancyBorder-' + props.color}>
        {props.children}
      </div>
    );
}

これにより、JSXをネストすることにより、他のコンポーネントに任意の子を渡すことができます

function WelcomeDialog() {
    return (
      <FancyBorder color="blue">
        <h1 className="Dialog-title">
          Welcome
        </h1>
        <p className="Dialog-message">
          Thank you for visiting our spacecraft!
        </p>
      </FancyBorder>
    );
}

ドキュメントで説明されているように、一部のコンポーネントは事前にその子を認識していません。これらは、汎用ラッパーまたはさまざまなコンテンツのボックスである可能性があり、これがControlPanelです。したがって、コンポーネントの子をレンダリングするには、親のchildrenメソッドでrenderプロップから子を明示的にレンダリングする必要があります。したがって、次のようにコードに適用します。

const ControlPanel = (props) => {
    return (
      <div className="control_panel" id="control_panel">
        {props.children}
      </div>
    );
}

props.childrenがどのようにレンダリングされるかに注意してください（関数コンポーネントであるためthis.props.childrenではありません）。

18
Li357

ネストされた要素には、小道具を介してアクセスできます。あなたの場合、これをしてください：

const ControlPanel = (props) => {
  return (
    <div className="control_panel" id="control_panel">
      {props.children}
    </div>
  );
}
1
kurumkan

ControlPanelの子をレンダリングする必要があります

const ControlPanel = ({ children }) => {
    return (
      <div className="control_panel" id="control_panel">
        {children}
      </div>
    );
}
1
Michael Peyper

App.js（JSXインデックスであると理解しています）は次のようになります。

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends Component {
render() {
return (
  <div className="App">
    <ControlPanel>
      <CustomerDisplay />
    </ControlPanel>
  </div>
);
}
}


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

classの前に（すべてのコンポーネントで）export defaultを追加してみてください。

0
JuMoGar