Question

我的应用程序：

我正在实现一个React Native应用程序，其中FlatList用于全屏显示每个项目。每个可能包含/显示几项内容，例如文本，图像，GIF。另外，可能会播放一些声音/歌曲。将此视为“增强的”画廊/旋转木马。

我的实际实现是这样的：


export default class App extends React.PureComponent {

    this.state = {
      currentIndex: null //currentIndex gets updated when displayed FlatList item changes
    };

   // Black magic here to update currentIndex

   render() {
      const data = [{image: "...", text: "...", sound: "..."}, {...},...]
      return ( 
          <FlatList
            data = {data}
            renderItem={({ item, index }) => {
              const isDisplayed = this.state.currentIndex === index;
              return <Thing {...item} isDisplayed={isDisplayed} />;
            }}       
            ...
          />
   }
}

Thing组件类似于：

export default class Thing extends React.PureComponent {
  render() {
    if (this.props.isDisplayed){
       <SoundComponent sound={this.props.sound}/>
       <View>
            <Text> this.props.text</Text>
            <Image> this.props.image</Image>
       </View>
    }

}

我的问题：

我应该每个SoundComponent保留一个Thing，还是应该使用一个由SoundComponent及其内部管理的全局App？一方面，我认为App不应该了解data的使用方式，另一方面，集中的SoundComponent似乎更容易协调一次声音。

请注意，一次只能播放一种声音。

Answer 1

React中没有任何类型的“全局”组件。每个组件都必须作为道具导入或传递。不过，如果您要避免向每个文件添加导入，则有几种选择：

1）创建一个Higher Order Component来呈现PageContent和包装的组件。

import PageContent from './PageContent';

const withPageContent = WrappedComponent => {
  return class extends React.Component {
    render () {
      return (
        <PageContent>
          <WrappedComponent />
        </PageContent>
      )
    }
  }
};

export default withPageContent;

//用法

import withPageContent from './withPageContent';

class MyComponent extends React.Component {
  render () {
    return (
      <div>
        I'm wrapped in PageContent!
      </div>
    )
  }
}

export default withPageContent(MyComponent);

2）将PageContent作为道具传递给组件：

import PageContent from './PageContent';

export default class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Child1 content={PageContent} />
        <Child2 content={PageContent} />
      </React.Fragment>
    )
  }
}

//用法

export default class Child1 extends React.Component {
  render () {
    const PageContent = this.props.content;
    return (
      <PageContent>
        I'm wrapped in PageContent!
      </PageContent>
    )
  }
}

export default class Child2 extends React.Component {
  render () {
    const PageContent = this.props.content;
    return (
      <PageContent>
        I'm wrapped in PageContent!
      </PageContent>
    )
  }
}

我应该保留一个全局共享组件，还是每个孩子使用一个共享组件？

我的应用程序：

我的问题：

1 个答案: