Question

我试图了解在React中使用道具的最佳方法是什么

假设我有一个使用import {FormattedMessage} from 'react-intl'

的容器

让我说我在容器的JSX中使用了一个组件。

现在，如果我也想在组件中使用 FormattedMessage ，我是否应该在组件中再次使用import？或者我应该通过容器将FormattedMessage作为支柱发送给组件吗？

示例：

import {FormattedMessage} from 'react-intl';

class Container {
   render() {
        return (
                <Component formattedMessage={FormattedMessage} />
        );
   }
}

Answer 1

<FormattedMessage/>是一个独立的组件，并以这种方式将其传递给您的子组件完全没必要。

如果要将组件从父级传递给子级，请改用特殊道具children。

<Container>渲染功能：

return (<Component><FormattedMessage /></Component>)

<Component>渲染功能：

return (<div>{props.children}</div>)

请参阅：https://reactjs.org/docs/composition-vs-inheritance.html

注意：如果要将已翻译的字符串作为道具发送到子组件中，请使用injectIntl高阶组件将intl道具传递到组件中。然后，您可以从组件中调用intl.formatMessage({id, defaultMessage})，将要作为道具传递的字符串转换为子组件。

请参阅：https://github.com/yahoo/react-intl/wiki/API#injection-api

Answer 2

您应该尝试不使用道具将组件传输到其他组件。更好地将它们导入到您需要的地方或使用高阶订单组件。道具通常用于传输数据或容器功能。

使用React props vs import，最佳选择是什么？

2 个答案: