react demo8 (設定元件自身屬性this.props.children)

阿新 • • 發佈：2019-02-03

需求：定義一個列表元件，列表項中顯示的內容，以及列表項的數量都由外部決定
學習：設定元件自身屬性this.props.children

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script 
>
    <script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>


<script type="text/babel">

    /*
     this.props.children

     childen是一個例外，不是跟元件的屬性對應的。
     表示元件的所有節點

     HTML5中有一種標籤：列表<ul><li>

     需求：定義一個列表元件，列表項中顯示的內容，以及列表項的數量都由外部決定

     */ 



    //建立元件
    var ListComponet = React.createClass({
        render:function(){
            return (
                <ul>
                    {
                            /*
                                列表項數量及內容不確定，在建立模板時才能確定
                                利用this.props.children從父元件獲取需要展示的列表項內容

                                獲取到列表項內容後，需要遍歷children，逐項進行設定
                                使用react.children.map方法
                                返回值：陣列物件，這裡陣列中的元素是<li 
>
                            */
                            React.Children.map(this.props.children,function(child){
                                //child是遍歷得到的父元件中的子節點
                                return <li>{child}</li>;
                            })
                    }
                </ul>

            )
        }
    })



   //渲染
   ReactDOM.render(
           (
              <ListComponet>
                  <a>我是有一條新聞111。。。。</a>
                  <a>我是有一條新聞2222222222。。。。</a>
                  <a>我是有一條新聞333333。。。。。。</a>
                  <a>我是有一條新聞4444444。。。。</a>
                  <a>我是有一條新聞55555555。。。。</a>
              </ListComponet>
           ),
       document.getElementById("container")
   )



</script>

</body>
</html>

效果圖顯示：
這裡寫圖片描述

react demo8 (設定元件自身屬性this.props.children)

需求：定義一個列表元件，列表項中顯示的內容，以及列表項的數量都由外部決定學習：設定元件自身屬性this.props.children <!doctype html> <html

React中的this.props.children

ren react () AC 當前一個 not AR child React this.props.children this.props對象的屬性與組件的屬性一一對應，但是有一個例外，就是this.props.children屬性。它表示組件的所有子節點。 var

React學習（五）this.props.children

this.props 物件的屬性與元件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示元件的所有子節點上面程式碼的 NoteList 元件有兩個 span 子節點，它們都可以通過 this.props.children 讀取。 &l

一個結合map函式與React.js中的this.props.children結合的例子

題目：實現一個元件 BlackBorderContianer，它會把作為它的巢狀結構的每個直接子元素都用一個黑色邊框的 div 包裹起來。例如： <BlackBorderContainer> <div classN

React PropTypes 定義元件的屬性型別和預設屬性

新增:在React 16版本之後, PropTypes 從react包換到了prop-types 包中,所以想要使用PropTypes 需要這樣:yarn add prop-types在需要引入的地方

react native -- this.props.children

this.props.children 指的是傳入到元件的孩子個數如Test元件 <Test> 　　<View><Text>1</Text></View> 　　<Text>2</T

第四節, this.props.children 獲取子元素並插入

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><script src="js/react.js"></script><s

Qt控制元件增加屬性並通過新增的屬性設定樣式

Qt控制元件增加屬性並通過新增的屬性設定樣式 1.應用場景在Qt應用程式設計中經常要對應用的介面進行美化，這裡要用到樣式表qss。下面說的方法適用於對某一種控制元件在介面上有幾種不用的風格樣式，例如

使用react——解決this.props.history.push無法跳轉的問題

轉自： https://blog.csdn.net/yingzizizizizizzz/article/details/78751305 場景：一個元件中，含有ul展開陣列的元件，在每一行中，都能點選相應的這一行，跳轉到對應的頁面。也就是說，元件套元件，子元件中this.props.history

React-Native 官方元件FlatLis 關於屬性onEndReached、onEndReachedThreshold的幾點使用總結

FlatList元件為什麼依然這麼難用官方提供的這款List元件相比於上一個版本的ListView來說已經優化很多了，但是，還是不能稱之為一個成熟的元件。 onEndReached、onRefresh兩個屬性的引入說明官方確實是想將下拉重新整理、上拉載入的模式引入這個元件，但是

angular,vue,react的基本語法—動態屬性、事件繫結、ref，angular元件建立方式

基本語法：動態屬性： vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]="msg" 事件繫結： vue: v-on:click="handleChange($eve

react 初探：react元件和屬性

react 的設計方式採用了元件化的方式，將UI 分割成一個個元件便於更好的實現和重複利用。元件分為函式式元件和類元件，函式式元件主要用來做為頁面渲染使用（僅僅作為頁面渲染，不附帶其他初始化功能）函式式元件 function Welcome(props) {

C#一些控制元件的屬性設定和用處

//資料庫與datagridview的關聯首先在datagridview中選擇編輯列，新增自己列名然後將datagridview的DataPropertyName屬性設定成資料庫中的名字 //contextMenuStip：右鍵出現的事件 //將contextMen

React-props.children屬性

props.children使用 1.程式碼如下： class MyFirst extends React.Component { render(){ return ( <div> { this.prop

如何不優雅的解決子元件丟失this.props的三個重要物件

把父元件的this.props暴力傳給子元件在元件裡就不能用this.props了要用this.props.data 才相當於this.props 然後就可以正常用這三個物件的屬性和方法了

react antd Tabs元件屬性activeKey使用方法

專案使用過程中發現的，網上沒有找到相關文章，可能就我（菜鳥）遇到了吧，哈哈～提供了這個屬性，但是官網沒有給出相關demo，開始是通過ref設定activeKey發現無效，最後找到解決辦法，程式碼如下： <Tabs ref={(e) => { this._Tabs =

react進階元件之Render Props小結

前言 Render props作為共享元件邏輯的一種有效模式，此模式藉助state和輔助引數，可以提供ui的更好的靈活性。 render funtion 在我們的元件中，我們都需要定義一個render方法，在這個方法中定義我們需要渲染的部分。 // 之前 render(){ const {on}

Reactjs中的屬性（this.props）

轉載自點選開啟連結一、什麼是屬性 React官方文件上對於屬性的介紹如下： React 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性（Props）來實現功能，但內部細節可能有非常複雜的實現。 Re

React基礎篇-元件；props；state

1.定義元件 //方法一：類似於建構函式的方式 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } //方法二：ES6中類的方式 class W

android控制元件TextView設定是否可見屬性

可見（visible) XML檔案：android:visibility="visible" Java程式碼：view.setVisibility(View.VISIBLE); 不可見（invisib

react demo8 (設定元件自身屬性this.props.children)

相關推薦