React が親コンポーネントを介して子コンポーネントにクラス名を渡す詳細な例

React は、ユーザー インターフェイスを構築するための JAVASCRIPT ライブラリです。この記事では、React が親コンポーネントを介して子コンポーネントにクラス名を渡す方法を中心に紹介しますので、必要な方は参考にしていただければ幸いです。

React チュートリアル

React は、ユーザー インターフェイスを構築するための JavaSCRIPT ライブラリです。
React は主に UI を構築するために使用されます。React は MVC の V (ビュー) であると考えている人が多いです。
React は Facebook の内部プロジェクトとして誕生し、Instagram の Web サイトの構築に使用され、2013 年 5 月にオープンソース化されました。
React は高性能で非常にシンプルなコードロジックを備えており、ますます多くの人が注目し、使用し始めています。

Reactの特徴

1. 宣言型設計 −Reactは、アプリケーションを簡単に記述できる宣言型パラダイムを採用しています。
2. 効率的 - React は DOM をシミュレートすることで DOM との相互作用を最小限に抑えます。
3. 柔軟性 - React は既知のライブラリやフレームワークとうまく連携します。
4.JSX - JSXはJavaScript構文の拡張です。 JSX は React 開発には必須ではありませんが、推奨されます。
5. コンポーネント − React を通じてコン​​ポーネントを構築すると、コードの再利用が容易になり、大規模なプロジェクトの開発にうまく適用できます。
6. 一方向の応答データ フロー - React は一方向の応答データ フローを実装することで重複コードを削減し、そのため従来のデータ バインディングよりもシンプルになります。

1. 親コンポーネントを介して子コンポーネントにクラス名を渡す方法 (19 行目)

2. さまざまなステータス値を介して特定のクラス名を適用する (22 行目)

 import React from 'react'
import './style.css'
class PageTitle extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      timeType:0
    }
  }
  handleClick(timeType){
    this.setState({
      timeType:timeType
    });
    this.props.handle(timeType+1);
  }
  render() {
    const {title,dataList} = this.props;
    return (
     <h3 className={this.props.clasName+" cp_title"}>{title}
       <p className="floatR">
         {dataList.map((item,index) => {
           return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
         })}
       </p>
     </h3>
    )
  }
}
export default PageTitle;

皆さんもこの記事を最後まで読んでください React をマスターしましょう知識をより深く。

関連する推奨事項:

React 制御コンポーネントと非制御コンポーネントの詳細な説明

React でコンポーネントを記述する方法

ReactJS でフォ​​ームの単一選択、複数選択、および逆選択を実装する方法

以上がReact が親コンポーネントを介して子コンポーネントにクラス名を渡す詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。