web-dev-qa-db-ja.com

ReactJS-反応コンポーネントのスタイルとクラスを変更するには？

コンポーネントのstyleとclassNameを、レンダリング関数の外で、レンダリングする前に変更できるようにしたいと思います。ここで示している以上のことを行っていますが、これは基本的な考え方であり、スタイルとクラス名をプロパティとして設定することができます。

以下は、「スタイル」変数がレンダー関数内に移動され、通常のようにdivに追加された場合にのみ機能します（例：<div style={style}>）。次の作業を行うにはどうすればよいですか？

JS Fiddle機能しません

編集： Working JS Fiddle here！

/** @jsx React.DOM */

var Main = React.createClass({

    render: function() {
       var result = this.doRender();

       var style = {
         border:'1px solid red'
       };

       result.style = style;

       return result;
    },

    doRender: function() {
        return (
          <div>Test</div>
        );
    }
});

React.renderComponent(<Main/>, document.body);
javascriptfacebookreactjs
15
Brad Parks

React要素は不変に設計されています。通常、アプリを再構成して適切なプロップを後で変更するのではなく、事前に構築すると、Reactがこれに該当すると想定します。つまり、- React.cloneElement 必要な効果を得るには：

_render: function() {
    return React.cloneElement(this.doRender(), {
        style: {border: '1px solid red'}
    });
},
_

（doRender()関数がカスタムコンポーネントを返した場合、propsを変更すると、そのコンポーネントのpropsが変更されます。生成される基になるDOMコンポーネントは変更されません。それをDOMコンポーネントにレンダリングして変更する方法はありません。コンポーネントの小道具、componentDidMountのDOMを手動で変更することはできません。）

10
Sophie Alpert