ReactJSX内でループする

1390
B Robster 2014-04-05 19:29.

私はReactで次のようなことをしようとしていますJSX(ObjectRowは別のコンポーネントです):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

関数呼び出しにマップされるJSXので、これが無効である理由を理解しJSXます。ただし、テンプレートランドから来てJSX、に慣れていないので、上記をどのように達成するか(コンポーネントを複数回追加する)はわかりません。

30 answers

1308
Sophie Alpert 2014-04-05 19:39.

JavaScript関数を呼び出しているように考えてください。for関数呼び出しへの引数が行くループを使用することはできません:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

関数tbodyfor引数としてループをどのように渡されているかを確認します–構文エラーにつながります。

ただし、配列を作成して、それを引数として渡すことはできます。

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

JSXを使用する場合は、基本的に同じ構造を使用できます。

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

ちなみに、私のJavaScriptの例は、JSXのその例が変換されるものとほぼ同じです。遊んバベルREPL JSXがどのように動作するかの感触を得るために。

902
Brigand 2014-04-05 19:46.

これがあなたの状況でうまくいくかどうかはわかりませんが、多くの場合、地図が良い答えです。

これがforループを使用したコードの場合:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

あなたは地図でこのようにそれを書くことができます

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6構文:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
472
JMM 2015-04-15 04:08.

map()@FakeRainBrigandの回答を好む配列がまだなく、これをインライン化して、ソースレイアウトが@SophieAlpertの回答よりも近い出力に対応するようにする場合:

ES2015(ES6)構文(スプレッドおよび矢印関数)を使用

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Re:Babelでトランスパイルすると、その警告ページには、Array.from拡散に必要であると記載されていますが、現在(v5.8.23)は、実際の拡散には当てはまらないようですArray。それを明確にするために、ドキュメントの問題を開いています。ただし、自己責任またはポリフィルで使用してください。

バニラES5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

インラインIIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

他の答えからのテクニックの組み合わせ

出力に対応するソースレイアウトを維持しますが、インライン化された部分をよりコンパクトにします。

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

ES2015の構文とArrayメソッドを使用

Array.prototype.fillあなたが上に示したように広がりを使用する代わりにこれを行うことができます:

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(実際には、の引数を省略できると思いますがfill()、100%ではありません。)以前のバージョンのfill()ソリューションでの間違いを修正してくれた@FakeRainBrigandに感謝します(リビジョンを参照)。

key

すべての場合において、keyattrは開発ビルドで警告を軽減しますが、子ではアクセスできません。子でインデックスを使用できるようにする場合は、追加の属性を渡すことができます。議論については、リストとキーを参照してください。

93
danielfeelfine 2016-10-30 18:35.

単純に使用して、マップ アレイES6構文でメソッドを:

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

keyプロパティを忘れないでください。

90
Alireza 2017-05-17 03:37.

配列マップ関数を使用することは、要素の配列をループし、Reactでそれらに従ってコンポーネントを作成する非常に一般的な方法です。これは、JSXでループを実行するための非常に効率的で整然とした方法である、ループを実行するための優れた方法です。ないそれを行うための唯一の方法が、好ましい方法。

また、必要に応じて、反復ごとに一意のキーを用意することを忘れないでください。マップ関数は0から一意のインデックスを作成しますが、生成されたインデックスを使用することはお勧めしませんが、値が一意である場合、または一意のキーがある場合は、それらを使用できます。

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

また、配列のマップ関数に慣れていない場合は、MDNから数行。

mapは、提供されたコールバック関数を配列内の要素ごとに1回順番に呼び出し、その結果から新しい配列を作成します。コールバックは、未定義を含む値が割り当てられている配列のインデックスに対してのみ呼び出されます。配列の欠落している要素(つまり、設定されたことがない、削除された、または値が割り当てられたことがないインデックス)に対しては呼び出されません。

コールバックは、要素の値、要素のインデックス、およびトラバースされるArrayオブジェクトの3つの引数で呼び出されます。

thisArgパラメーターがマップに提供されている場合、それはコールバックのthis値として使用されます。それ以外の場合、未定義の値がこの値として使用されます。コールバックによって最終的に観察可能なこの値は、関数によって見られるこれを決定するための通常の規則に従って決定されます。

mapは、呼び出された配列を変更しません(ただし、コールバックが呼び出された場合は変更できます)。

61
mpen 2015-10-05 19:35.

すでに使用lodashしている_.times場合は、この機能が便利です。

import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <ol>
          {_.times(3, (i) => (
            <li key={i}>
              <Select onSelect={this.onSelect}>
                <option value="1">bacon</option>
                <option value="2">cheez</option>
              </Select>
            </li>
          ))}
        </ol>
      </div>
    );
  }
}
45
Brandon Sibeitokgong 2016-01-04 19:53.

リターンブロックの外側に抽出することもできます。

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}
37
Etai 2015-02-03 09:35.

これが古いスレッドであることは知っていますが、React Templatesをチェックアウトすることをお勧めします。これにより、いくつかのディレクティブ(rt-repeatなど)を使用して、reactでjsxスタイルのテンプレートを使用できます。

あなたの例は、react-templatesを使用した場合、次のようになります。

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>
32
Yangshun Tay 2017-06-02 17:12.

これを行うには複数の方法があります。JSXは最終的にJavaScriptにコンパイルされるため、有効なJavaScriptを記述している限り、問題はありません。

私の答えは、すでにここに提示されているすべての素晴らしい方法を統合することを目的としています。

オブジェクトの配列がない場合は、単に行数だけです。

returnブロック内で、を作成しArrayて使用しArray.prototype.mapます:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

returnブロックの外側では、通常のJavaScriptforループを使用するだけです。

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

即時に呼び出される関数式:

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

オブジェクトの配列がある場合

returnブロック内で、コンポーネント.map()に対する各オブジェクト<ObjectRow>

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

returnブロックの外側では、通常のJavaScriptforループを使用するだけです。

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

即時に呼び出される関数式:

render() {
  return (
    <tbody>
      {(() => {
        const rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}
27
lulin 2017-01-11 23:49.

numrowsが配列の場合、それは非常に単純です。

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

Reactの配列データ型は非常に優れており、配列は新しい配列をバックアップでき、filter、reduceなどをサポートできます。

24
Manav Sehgal 2016-05-30 10:59.

mapステートメントの使用を示すいくつかの回答があります。これは、FeatureListコンポーネント内のイテレーターを使用して、featuresと呼ばれるJSONデータ構造に基づいてFeatureコンポーネントを一覧表示する完全な例です

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

完全なFeatureListコードはGitHubで表示できます。フィクスチャがここにリストされています

22
Jee Mok 2018-07-14 20:12.

時間とリターンの数のループに、あなたはの助けを借りて、それを達成することができますfromし、map

<tbody>
  {
    Array.from(Array(i)).map(() => <ObjectRow />)
  }
</tbody>

どこ i = number of times


レンダリングされたコンポーネントに一意のキーIDを割り当てたい場合React.Children.toArrayは、Reactドキュメントで提案されているように使用できます。

React.Children.toArray

子の不透明なデータ構造を、各子に割り当てられたキーを持つフラット配列として返します。レンダリングメソッドで子のコレクションを操作する場合、特にthis.props.childrenを渡す前に並べ替えたりスライスしたりする場合に便利です。

注意:

React.Children.toArray()子のリストをフラット化するときに、ネストされた配列のセマンティクスを保持するようにキーを変更します。つまり、toArrayは、返された配列の各キーにプレフィックスを付けて、各要素のキーがそれを含む入力配列にスコープされるようにします。

<tbody>
  {
    React.Children.toArray(
      Array.from(Array(i)).map(() => <ObjectRow />)
    )
  }
</tbody>
20
Jan Franz Palngipang 2016-08-20 14:15.

あなたの州に一連のアイテムがあるとしましょう:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>
20
bharadhwaj 2016-11-21 23:46.

あなたはこの内部変換するために選択した場合のリターン()レンダリング方法を、最も簡単なオプションが使用されるだろうマップ()メソッドを。以下に示すように、map()関数を使用して配列をJSX構文にマップします(ES6構文が使用されます)。


親コンポーネントの内部

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

key子コンポーネントに追加された属性に注意してください。キー属性を指定しなかった場合は、コンソールに次の警告が表示されます。

警告:配列またはイテレータの各子には、一意の「キー」小道具が必要です。

注:よくある間違いの1つはindex、反復時にキーとして使用することindexです。要素をキーとして使用することはアンチパターンであり、詳細についてはこちらをご覧ください。要するに、それはだ場合、NOT静的リスト使用することはありませんindexキーとして。


これで、ObjectRowコンポーネントで、プロパティからオブジェクトにアクセスできます。

ObjectRowコンポーネントの内部

const { object } = this.props

または

const object = this.props.object

これにより、親コンポーネントからObjectRowコンポーネントの変数objectに渡したオブジェクトがフェッチされます。これで、目的に応じてそのオブジェクトの値を吐き出すことができます。


参照:

Javascriptのmap()メソッド

ECMAスクリプト6またはES6

16
David Q Hogan 2016-12-29 05:47.

ES2015 / Babelの可能性は、ジェネレーター関数を使用してJSXの配列を作成することです。

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>
16
Do Async 2017-10-28 03:08.

ES2015 Array.fromマップ機能付き+キー

何も持っていない場合は、関数で要素を繰り返す.map()ことができます。Array.from()map

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>
16
J C 2017-01-25 23:44.

私はこれを使用します:

gridItems = this.state.applications.map(app =>
          <ApplicationItem key={app.Id} app={app } />
);

PS:キーを忘れないでください。そうしないと、多くの警告が表示されます。

15
Rafi Ud Daula Refat 2016-05-22 08:39.

...または、オブジェクトの配列を準備し、それを関数にマップして、目的の出力を得ることができます。私はこれを好みます。なぜなら、レンダリングのリターン内にロジックを持たないコーディングのグッドプラクティスを維持するのに役立つからです。

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}
15
Joshua Michael Waggoner 2017-05-28 05:29.

単に.map()コレクションをループして、<ObjectRow>各反復からの小道具でアイテムを返すために使用します。

objectsどこかに配列があると仮定して...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>
13
Adam Donahue 2016-04-01 15:45.

私はプログラミングロジックがの戻り値の外で発生するアプローチを好む傾向がありますrender。これにより、実際にレンダリングされたものを簡単に理解できるようになります。

だから私はおそらく次のようなことをするでしょう:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

確かに、これは非常に少量のコードであるため、インライン化しても問題なく機能する可能性があります。

12
Jurgo Boemo 2016-09-26 23:26.

もちろん、他の回答で提案されているように、.mapで解決することもできます。すでにbabelを使用している場合は、jsx-control-statementsの使用を検討できます。 少し設定が必要ですが、読みやすさの観点からは価値があると思います(特に非反応開発者にとって)。リンターを使用する場合は、eslint-plugin-jsx-control-statementsもあります

12
hlissnake 2015-06-26 23:24.

JSXコードは純粋なJavaScriptコードにコンパイルされ、タグはすべてReactElementオブジェクトに置き換えられます。JavaScriptでは、関数を複数回呼び出して、返された変数を収集することはできません。

これは違法です。唯一の方法は、配列を使用して関数が返す変数を格納することです。

または、JavaScript ES5以降Array.prototype.mapで使用可能なものを使用してこの状況を処理できます。

おそらく、Angularのng-repeatように繰り返し関数を実装するために、新しいJSX構文を再作成する他のコンパイラを作成できます。

12
abhirathore2006 2016-06-03 09:37.

これは複数の方法で行うことができます。

  1. 上で示唆したようreturnに、配列にすべての要素を格納する前に

  2. 内部をループする return

    方法1

     let container =[];
        let arr = [1,2,3] //can be anything array, object 
    
        arr.forEach((val,index)=>{
          container.push(<div key={index}>
                         val
                         </div>)
            /** 
            * 1. All loop generated elements require a key 
            * 2. only one parent element can be placed in Array
            * e.g. container.push(<div key={index}>
                                        val
                                  </div>
                                  <div>
                                  this will throw error
                                  </div>  
                                )
            **/   
        });
        return (
          <div>
             <div>any things goes here</div>
             <div>{container}</div>
          </div>
        )
    

    方法2

       return(
         <div>
         <div>any things goes here</div>
         <div>
            {(()=>{
              let container =[];
              let arr = [1,2,3] //can be anything array, object 
              arr.forEach((val,index)=>{
                container.push(<div key={index}>
                               val
                               </div>)
                             });
                        return container;     
            })()}
    
         </div>
      </div>
    )
    
12
Javasamurai 2016-12-03 02:17.

これが簡単な解決策です。

var Object_rows = [];
for (var i = 0; i < numrows; i++) {
  Object_rows.push(<ObjectRow />);
}
<tbody>{Object_rows}</tbody>;

マッピングや複雑なコードは必要ありません。行を配列にプッシュし、値を返してレンダリングする必要があります。

9
Rohit Jindal 2017-01-22 04:18.

JSXコード内でJavascript構文を記述しているため、Javascriptを中括弧で囲む必要があります。

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>
9
Fba Shad 2017-09-22 08:02.

自己呼び出し関数を使用することもできます。

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>
9
Sinka Lee 2017-05-29 04:16.

これはReactドキュメントからのサンプルです:子としてのJavaScript式

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

あなたの場合として、私はこのように書くことを提案します:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

Reactはキーを使用して配列内のデータを異なるため、キーは非常に重要であることに注意してください。

9
Sampath 2017-04-18 23:28.

私はそれを次のように使用します

<tbody>
  { numrows ? (
     numrows.map(obj => { return <ObjectRow /> }) 
    ) : null
  }
</tbody>
8

次のようなことができます。

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}
8
Christophe Pouliot 2017-07-08 07:10.

素晴らしい質問です。

特定の数のコンポーネントを追加したいときに行うことは、ヘルパー関数を使用することです。

JSXを返す関数を定義します。

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

BAE Systems Maritimeは昨日、英国海軍の2番目のクイーンエリザベスクラスの空母であるHMSプリンスオブウェールズのブリッジモジュールを展開しました。公海を航海するよりも、アウターリムの惑星を周回してタイファイターを発射する必要があるようです。70,000の排水量のトン運搬船は、2020年に就役し、姉のエリザベス女王と同様に、約40機の航空機を運ぶ予定です。

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルは、通常の大学野球の強みであるピッチング、ディフェンス、スマートベースランニングを通じて、全国ランキングのトップ5と19-2の会議記録への道を歩みました。昨夜、彼らは野球の最もエキサイティングなプレーの1つである盗塁を使用して、ウェイクフォレストのスイープを完了しました。

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

粗いパン粉とふわふわの食感のコーンブレッドは、唐辛子を吸い上げるのに理想的な乗り物です。しかし、それだけではありません。

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

ニール・ブロムカンプが、チャッピーが第10地区をどのように遅らせたのかについて話します。フォースの覚醒の噂は、次の予告編に何を期待するかについてのいじめを提供します。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language