流星/が反応：メインテンプレートでコンポーネントをどのように反応するか統合する

これは私の検索ページが私の流星アプリケーションでどのように見えるかです：私は流星/が反応：メインテンプレートでコンポーネントをどのように反応するか統合する

<head> 
    <title>Search</title> 
</head> 

<body> 
    <div class="ui icon input"> 
     <input type="text" placeholder="Search..."> 
     <i class="circular search link icon"></i> 
    </div> 
</body>

/client/main.html

反応が全く新しいので、この単純な検索に反応を使用したいと思います。

/imports/ui/search.jsx

import React, { Component } from 'react'; export default class Search extends Component { render() { return ( <div class="ui icon input"> <input type="text" placeholder="Search..."> <i class="circular search link icon"></i> </div> ); } }

しかし、どのように、私は適切に反応するためにそれを使用する必要がありますか？メインテンプレートでそのコンポーネントを使用するにはどうすればよいですか？そして、この入力フィールドを画面の中央に設定するにはどうしたらいいですか？

出典

2017-01-29 user3142695

最初にドキュメントと例を確認してください。

Hereは、あなたの質問にお答えする例です。

HTMLには、空のcontainer要素だけが含まれています。

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script> 
<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div>

Appコンポーネントが主要コンポーネントです。 Routerのようなものを使うことができます。あなたが作ったとして

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Search /> 
     </div> 
    ); 
    } 
}

Searchコンポーネント。上記では、SearchコンポーネントがReactのように使用されていることがわかりました。

スタイルについては、スタイルオブジェクトをコンポーネントに直接渡すことも、CSSファイルを作成することもできます。

class Search extends React.Component { 
    render() { 
    return (
     <div class="ui icon input" style={searchContainerStyle}> 
     <input type="text" style={searchInputStyle} placeholder="Search..." /> 
     <i class="circular search link icon"></i> 
     </div> 
    ); 
    } 
} 

const searchContainerStyle = { 
    width: '50%', 
    margin: '0 auto' 
} 

const searchInputStyle = { 
    width: '100%' 
}

最後にcontainerの下にAppを表示します。

React.render(<App />, document.getElementById('container'));

出典

2017-01-30 05:00:54

流星/が反応：メインテンプレートでコンポーネントをどのように反応するか統合する

答えて

関連する問題