使用状态中的值作为组件文本

Question

我有一个小应用程序，我需要在其中的几个地方使用相同的文本字符串。我对反应相当陌生，并试图弄清楚如何在 Header 和内容组件中使用 this.state 中的 appTitle。我认为使用 props 可能更有意义，但不确定这是否是实现它的最佳方式。

 const Header = () => (
  <AppHeader
    data-testid="app-header-default-example"
    position="static"
    renderNav={({ getNavProps }) => (
      <div {...getNavProps({})}>
      </div>
    )}
  />
);

const Content = () => (
  <div className="column-layout-example" style={styles.root}>
    <ColumnLayout container spacing={12}>
      <ColumnLayout item xs={4}>
        <Panel style={styles.panelLeft}><img src={leftImage} alt="logo"></img></Panel>
      </ColumnLayout>
      <ColumnLayout item xs={8}>
        <Panel style={styles.panelRight}><h1>{this.state.appTitle}</h1></Panel>
      </ColumnLayout>
    </ColumnLayout>
  </div>
);

const Main = () => (
  <ColumnLayout container>
    <Header />
    <Content />
  </ColumnLayout>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      appTitle: 'Notifications'
    }
  }

  render() {
    return (
      <ColumnLayout spacing={12}>
      <ThemedMain
        theme={lightTheme}
      />
      </ColumnLayout>
    );
  }
}

Answer 1

我假设 ThemedMain 渲染你的 Content 组件，如果这个假设是正确的那么在 App render() 你需要通过 this.state.appTitle 像这样 ThemedMain

<ThemedMain
  theme={lightTheme}
  appTitle={this.state.appTitle}
/>

然后在 ThemedMain render() 中做类似的事情，将 appTitle 传递给 Content 并从 props

访问它

虽然这种方法在一定程度上会让人厌倦，所以当你厌倦它时，我建议你看看 react context

Answer 2

您的 App 组件在 state 中保存 appTitle 并可以通过 props 将其传递给您的 Header 和 Content 组件.由于这两个组件在 Main 组件中呈现，因此您必须先将 appTitle 传递给该组件。我看不到你在哪里使用 <Main />，但假设 <ThemedMain /> 呈现 <Main />，你可以执行以下操作：

在App渲染中：

<ThemedMain
  theme={lightTheme}
  appTitle={this.state.appTitle}
/>

在 ThemedMain 渲染中（我不是 100% 确定这个，除非你显示这个组件的代码）：

<Main appTitle={this.props.appTitle} />

您的 Main 功能组件变为：

const Main = props =>
  <ColumnLayout container>
    <Header appTitle={props.appTitle} />
    <Content appTitle={props.appTitle} />
  </ColumnLayout>

现在您的 Header 和 Content 组件可以将 props 作为参数并可以通过 props.appTitle

访问 appTitle

对于较大的应用程序，请考虑使用 React Redux，这样您就可以绕过不需要的组件通过 props 的滴流。

Answer 3

您必须将其作为 props 传递或将页眉和内容移动到应用程序中 class。这是因为 Header 和 Content 在 App class.

外部无法访问 this.state 对象

将其作为 prop 向下传递（您需要将其传递到 Main，然后传递到 Header 和 Content）：

const Header = (props) => (
  <AppHeader
    data-testid="app-header-default-example"
    position="static"
    renderNav={({ getNavProps }) => (
      <div {...getNavProps({})}>
      </div>
    )}
  />
);

const Content = (props) => (
  <div className="column-layout-example" style={styles.root}>
    <ColumnLayout container spacing={12}>
      <ColumnLayout item xs={4}>
        <Panel style={styles.panelLeft}><img src={leftImage} alt="logo"></img></Panel>
      </ColumnLayout>
      <ColumnLayout item xs={8}>
        <Panel style={styles.panelRight}><h1>{props.appTitle}</h1></Panel>
      </ColumnLayout>
    </ColumnLayout>
  </div>
);

const Main = (props) => (
  <ColumnLayout container>
    <Header appTitle={props.appTitle}/>
    <Content appTitle={props.appTitle}/>
  </ColumnLayout>
);

class App extends Component {
  constructor() {
    super();
    this.state = {
      appTitle: 'Notifications'
    }
  }

  render() {
    return (
      <Main appTitle={this.state.appTitle}/>
    );
  }
}

使用状态中的值作为组件文本

Using value in state as component text

reactjs

react-props