Question

我尝试了很多事情，并且可以在组件之间传递函数，但是当我尝试将状态从父级传递给子级时，我收到一条错误消息，提示无法读取未定义

父级基本上是recyclerlistview，子级是HorizontalScroll

Parent

    _renderRow(type, data, index) {
        switch (type) {
            default:
                return (
                    <View key={index} style={styles.container}>
                        <HorizontalScroll
                            data={this.state.data}
                            posts={data}
                        />
                    </View>
                )
            }
    }

   render() {
        return (
            <View style={[styles.container, {backgroundColor: 'black'}]}>
                {this.state.loaded && (
                    <RecyclerListView
                        style={{height: fullHeight, width: fullWidth}}
                        extendedState={this.state}
                        rowRenderer={this._renderRow}
                        dataProvider={this.state.dataProvider}
                        layoutProvider={this._layoutProvider}
                        showsVerticalScrollIndicator={false}
                        pagingEnabled={true}
                        renderAheadOffset={0}
                    />
                )}
            </View>
        )
    }

但是当我在子组件中调用this.props.anything时，我总是变得不确定吗？如何将状态从父母传递给孩子？我可以调用函数，并且可以成功地将函数从父级传递给子级，但是不能传递状态？

Answer 1

如果您要像这样将数据从父级传递给子级

  <HorizontalScroll
   data={this.state.data}
   posts={data}
   />

像这样访问子组件。

如果是有状态组件

 this.props.data   // for data

 this.props.posts  // for posts

如果无状态。

props.data        // for data

props.posts       // for posts

Answer 2

由于我在Google上找不到任何相关内容，因此我将不回答这个问题。

我记得在本机响应中，您需要通过extendedState，而不仅是我不知道为什么的原因

这不起作用

const [someState, setSomeState] = useState()
const [anotherState, setAnotherSate] = useState()
...

const handleRemoveDetail = () => {
   someState(0);
 };

return (
  {someState onRemoveDetail={handleRemoveDetail} ? (
    <A />
  ) : (
    <div>
      <B />
      <C />
    </div>
  )}
)

这样做

<ChildComponent 
    data={...this.state}
/>

***编辑

我的renderRow函数未在render函数的recyclerview中绑定到此。当我改变

<ChildComponent 
    data={this.extendedState}
/>

到

rowRenderer={this._renderRow}

一切正常，我可以像这样正确传递状态

rowRenderer=this._renderRow.bind(this)

如何在函数React中将状态从父项传递给子项？

2 个答案: