Question

我正在更改父组件内部的状态：

  this.setState({ langIndex: 0 });

父组件正确重新渲染。但是除非我将父母的状态作为道具传递给孩子，否则不要重新渲染孩子：

  <LoginForm langIndex={this.state.langIndex} />

现在langIndex在LoginForm内是无用的，但是我仍然需要一些东西在其中重新渲染。是否有任何“清洁”的方式？

Answer 1

正如您在其中一条评论中提到的那样，您正在使用i18next：

i18next的{{3}}可以根据需要启用语言更改的重新渲染。他们通过订阅i18next商店并在语言更改时触发状态更改来工作。

您可以使用useTranslation钩子：

function MyComponent() {
  const { t, i18n } = useTranslation();
  // or const [t, i18n] = useTranslation();

  return <p>{t('my translated text')}</p>
}

或WithTranslation HOC：

function MyComponent({ t, i18n }) {
  return <p>{t('my translated text')}</p>
}

export default withTranslation()(MyComponent);

呼叫i18n.changeLanguage()将触发重新渲染。

Answer 2

如果您的问题是您需要将数据从“父级”传递给孙子级（或树上的多个级别），而又不想将其传递给所有级别（通常称为“道具钻探”），那么您可以使用react context来跳过关卡

这是一个正在运行的示例：

const MyContext = React.createContext(null);

const Child = () => {
  const value = React.useContext(MyContext);
  return <div>{`in child... ${value}`}</div>;
};

const Parent = () => <Child />;

function App() {
  const [value, setValue] = React.useState("");
  return (
    <MyContext.Provider value={value}>
      <div>App</div>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <Parent />
    </MyContext.Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

使子组件重新渲染而无需发送无用的道具

2 个答案: