web-dev-qa-db-ja.com

オプションの要素をreactjsのプロップとしてコンポーネントに渡す方法

Elementであるオプションのプロップをコンテナーコンポーネントに渡す適切な「反応」方法を理解しようとしています。これは、そのコンポーネントの子とは異なる方法で処理されます。

簡単な例として、子をレンダリングするPanelコンポーネントがあり、特別にレンダリングされる（例では、文字列ではなく要素である）オプションの「title」プロップ（例では抽象化を維持しながら、特別な振る舞いをする特別なスポット。

1つのオプションは、子から引き出されて特別にレンダリングされるコンポーネントを持つことです：

<Panel>
   <Title> some stuff</Title>
   <div> some other stuff</div>
</Panel>

しかし、子供たちを引き抜いて、そのように別々に扱うのはおかしいようです。

これは通常どのように反応で処理されますか、そして私はこれを正しい方法で考えていますか？

javascriptreactjscomponents
8
Zak Kus

特別なことをする必要はありません。タイトルコンポーネントを小道具として渡してから、{this.props.title}レンダリングしたい場所に：

class Panel extends React.Component {
  render() {
    return <div>
      {this.props.title}
      <div>Some other stuff...</div>
    </div>;
  }
}

class App extends React.Component {
  render() {
    var title = <Title>My Title</Title>;
    return <Panel title={title}/>;
  }
}

titleプロップに値を渡さない場合（または値がfalse、null、またはundefinedの場合）、何もレンダリングされませんそこ。

これは、Reactでかなり一般的なパターンです。

6
Jordan Running

あなたはこのようなことをすることができます

render(){
    <div>
        {this.props.title ? this.props.title : null}
        {this.props.children}
    </div>
}

基本的に、タイトル要素を小道具として渡した場合は、要素として作成してレンダリングします。それ以外の場合はnullを入力します...

それを作成するには、次のようにします。

<Panel title={<Title>Something Here</Title>}
    <div> something here</div>
</Panel>

これは通常、reactがオプションの子コンポーネントを処理する方法です。

3
John Ruddell

オプションのpropの属性が必要な場合、propが提供されている場合は最初にチェックを行う必要があります。それ以外の場合は、次のようになります。

TypeError: Cannot read property 'yourPropProperty' of undefined

条件付きレンダリングコンテキスト（オプションのthis.props.ignore配列に依存）では、これはできません機能します。

{!this.props.ignore.includes('div')) && (
   <div>
      Hey
   </div>
)}

代わりに、次のことを行う必要があります。

{(!this.props.ignore || !this.props.ignore.includes('div'))) && (
   <div>
      Hey
   </div>
)}
1
Franco Méndez

できることの1つは、コンポーネントのデフォルトのプロップ（通常は何もしないように初期化されている）を用意することです。

たとえば、オプションの関数propが必要な場合：

class NewComponent extends React.Component {
    ...
    componentDidMount() {
        this.props.functionThatDoesSomething()
    }
}

NewComponent.defaultProps = {
    functionThatDoesSomething: () => {}
}

このように、親コンポーネントは関数の小道具を渡すかどうかを選択でき、アプリはエラーが原因でクラッシュしません

this.props.functionThatDoesSomethingは関数ではありません。

0
Taiwosam