Question

我正在渲染两个组件SearchForm和RecentSearch like

var SearchFormContainer = React.createClass({
  render: function() {
    return (
        <div>
        <SearchForm />
        <RecentSearch />
        </div>      
    );;
  }
});

SearchForm中有一个州。基于我想渲染RecentSearch组件的状态。如何查看SearchFrom的状态？我试过的是：

var SearchFormContainer = React.createClass({
  render: function() {
    return (
        <div>
        <SearchForm ref="search_form"/>
        {this.refs.search_form.state ? <RecentSearch /> : null}
        </div>
    );
  }
});

this.refs.search_form.state returing undefined。

Answer 1

将状态保留在父容器（SearchForm）中。更新此状态，例如通过回传函数传递给const Container = React.createClass({ onSearch(value) { this.setState({search: value}); } render() { <div> <SearchForm onSearch={this.onSearch} /> <RecentSearch recentValue={this.state.search} /> </div> } }); const SearchForm = ({onSearch}) => { return ( <input type="search" onChange={event => onSearch(event.target.value)} /> ); }。像这样：

<flow name="merge-jsonFlow1">
        <http:listener config-ref="HTTP_Listener_Configuration" path="/json-merge" doc:name="HTTP"/>
        <expression-component doc:name="Mock HTTP Response"><![CDATA[payload = '{"shops":[{"shop":{"code":"a","streetName":"a","city":"a","district":"a","state":"a","postalCode":"a","country":"a"}},{"shop":{"code":"b","streetName":"b","city":"b","district":"b","state":"b","postalCode":"b","country":"b"}}]}']]></expression-component>
        <set-variable variableName="shops" value="#[payload]" doc:name="Store Orig Payload to Variable"/>
        <processor-chain doc:name="Processor Chain">
            <splitter expression="#[json:/shops]" doc:name="Splitter"/>
            <set-variable variableName="storeCode" value="#[json:/shop/code]" doc:name="Set Store Code"/>
            <expression-component doc:name="Mock HTTP Call to Get SalesOffice"><![CDATA[if (flowVars['storeCode'] == 'a') {
    payload = '{"salesOffice":{"shop":{"code":"a"},"office":"a","branch":"a","district":"a","subRegion":"a","region":"a"}}';
} else if (flowVars['storeCode'] == 'b') {
    payload = '{"salesOffice":{"shop":{"code":"b"},"office":"b","branch":"b","district":"b","subRegion":"b","region":"b"}}';
}]]></expression-component>
            <collection-aggregator failOnTimeout="true" doc:name="Collection Aggregator"/>
        </processor-chain>
        <set-payload value="#[[flowVars['shops'], payload]]" doc:name="Merge Two JSON"/>
        <json:json-to-object-transformer doc:name="JSON to Object"/>
        <dw:transform-message metadata:id="c72e3e02-8350-42ec-a3cb-ca61c7b722b4" doc:name="Transform Message">
            <dw:input-payload doc:sample="json-merge.json"/>
            <dw:set-payload><![CDATA[%dw 1.0
%output application/json
---
using (
    shops = payload[0].shops,
    so = payload[1].*salesOffice
)
{
    shops : shops.shop map {
        shop: using (mycode = $.code) {
                code: $.code,
                streetName: $.streetName,
                city: $.city,
                district: $.district,
                state: $.state,
                postalCode: $.postalCode,
                country: $.country,
                salesOffice: ((so map {
                    shopCode: $.shop.code,
                    office: $.office,
                    branch: $.branch,
                    district: $.district,
                    subRegion: $.subRegion,
                    region: $.region
                }) filter $.shopCode == mycode)[0]
        }
    }
}]]></dw:set-payload>
        </dw:transform-message>
    </flow>

我还推荐Dan Abromov关于Smart＆amp; amp;哑组件： use open() on an AssetManager

希望这有帮助！

Answer 2

In React状态是一个组件级概念，从上到下通过道具传递给子组件，而不是相反。

如果您想根据RecentSearch的状态呈现SearchForm组件，可以在SearchFormContainer组件中添加额外的状态层，以便基本跟踪{{1}基于此提交和有条件地呈现SearchForm。

RecentSearch

甚至更好，删除引入的额外复杂性（除非您对var SearchFormContainer = React.createClass({ getInitialState: function() { return { userHasSearched: false } }, onSearchSubmit: function() { this.setState({ userHasSearched: true }); }, render: function() { return ( <div> //Pass submit handler down to the SearchForm component <SearchForm onSubmit={this.onSearchSubmit} /> {this.state.userHasSearched ? <RecentSearch /> : null} </div> ); } });有明确的未来意图），并在SearchFormContainer内有条件地返回<RecentSearch />组件你的州实际上就在那里。

如何在渲染函数中检查子组件的状态？

2 个答案: