Preactのprops

PreactはReactとほぼ互換のコンポーネント軽量ライブラリで、propsの基本的な使い方もReactと同じです。
JSXのpropsはReactとまったく同じ書き方で動作します。

コンポーネント外からのprops注入

h()関数は、第1引数がJSXなどのDOMコンポーネント、第2引数がprops, 第3引数がchildrenになっており、第2引数にJSオブジェクトを指定することで、propsを注入できます。
実利用を想定してrender()と組み合わせた記述例は以下のようになります。

render(h(App, { some_prop: 'some_val' }, null), dom_node);

コンポーネント内は非同期関数をストレートに書けないため、fetch()などの非同期関数で取得するデータをpropsとして渡したい場合に使えます。
h()などの詳細は、 API Referenceを参照してください。

ravigorへのProps注入

ライブラリ依存ではありますが、クライアントサイドルーティング内でもpropsを扱う手段はあります。
ravigerの場合、 useRoutes()のroutePropsオプションにオブジェクトを渡すことで、各ルーティング関数からpropsとして参照できます。

const App = (props) => {
  const routes = {
    '/' => ({ some_prop }) => <SomeComponent some_prop={some_prop} />
  };

  let route = useRoutes(routes, { routeProps: props })
中馬崇尋
Chuma Takahiro
Litのコード構成
Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。……
Selenium Python
SeleniumはWebアプリケーションをE2Eテストするフレームワークです。 ブラウザをスクリプト操……
Litの特徴
LitはWebのUIコンポーネント開発向けライブラリで、React.jsやVue.jsなどのオルタナ……
HTMLフォームからAPIコールするイディオム
HTMLフォームには主にPOSTのリクエストを投稿する機能があります。 onSubmitイベントにハン……
SVG画像にCSS変数を適用する
SVG画像はベクター画像標準としてWebで広く利用されています。 またSVGはXMLでもあり、加工する……