0

我正在尝试将自定义道具传递给子组件。它们在父组件中定义并显示在 React 工具中,但在子组件中未定义。

class App extends Component {
    render() {
        return (
            <div>    
                <ReactiveBase
                    app="galnet2"
                    url="http://192.168.0.10:9200"
                >
                ... other components... 
                <ReactiveComponent
                    ComponentId='wrapper'
                    fieldName = 'publication_date'
                    startDate = '3303-01-01'
                    endDate = '3305-12-12'
                    childId = 'galnetDateRange'
                    defaultQuery={() => ({
                        query: {
                          match_all: { }
                        }
                    })}
                    render = {({fieldName, childId, startDate, endDate}) => (
                        <GalNetDateRange
                            fieldName={fieldName}
                            childId={childId}
                            startDate={startDate}
                            endDate={endDate}

                        />
                    )}
                 />

                 <Results />
                 </ReactiveBase>
                 </div>
            );
        }
    }
    export default App;

还有GalNetDataRange

class GalNetDateRange extends Component {
         constructor(props) {
             super(props);
             this.handleStartChange = this.handleStartChange.bind(this);
             this.handleEndChange = this.handleEndChange.bind(this);
             this.onValuesChangeFinish = this.onValuesChangeFinish.bind(this);
         };
         ... function definitions...
         render() {
             return (
                 <div>
                     <input type="text" value={this.props.startDate} onChange={this.handleStartChange} />
                     <input type="text" value={this.props.endDate} onChange={this.handleEndChange} />
                     <div onClick={this.onValuesChangeFinish(this.startDate, this.endDate)}>Set</div>
                 </div>
             );
         }
     }

    GalNetDateRange.propTypes = {
        childId: PropTypes.string.isRequired,
        fieldName: PropTypes.string.isRequired,
        startDate: PropTypes.string.isRequired,
        endDate: PropTypes.string.isRequired
    };

    export default GalNetDateRange;`
4

0 回答 0