我正在尝试将自定义道具传递给子组件。它们在父组件中定义并显示在 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;`