Question

我想预定义一些JSX并在不同组件中多次使用它是否合适。

const saveButton = 
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">Save</Button>
  </div>;

const test = <div>{saveButton}</div>;

与正常的功能性反应组件相比，还有什么缺点吗？

export const SaveButton = () => (
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">Save</Button>
  </div>
);

const test = <div> <SaveButton /> </div>

那该怎么办呢，而不是用react props起作用呢？

const saveButton = (text: string) => (
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">{text}</Button>
  </div>
);

const test = <div> {saveButton(text)} </div>;

Answer 1

React组件（代码段2）在React devtools中将显示为<SaveButton>...</SaveButton>，而其他选项则不会。

反应组件（代码段2）是通常完成的方式。如果组件需要展示动态行为，则应将参数作为props传递：

const SaveButton = ({ text }) => (
  <div class="u-mth u-textRight">
    <Button variant="flatBlue">{text}</Button>
  </div>
);

和

<SaveButton text={text} />

Helper函数（代码段3）是通过直接调用来提高React组件性能的方法。除非另有证明，否则可以认为是初步优化。

只要元素层次结构不暴露动态行为，在正常情况下，将React元素定义为变量（代码段1）就没有不利之处。如果将来有可能需要动态行为（自定义或本地化文本），则需要重构。

Answer 2

第一个只是jsx，它不是组件。

第二个是无状态组件，它也很好，但是您没有使用任何道具。

由于您还没有使用过道具，因此第三项也只是一个功能而不是一个组件。我将按照答案中的@estus进行操作。

但是也请查看此link，它表示您所采用的方式实际上更快。

Answer 3

它只是声明变量。没有其他的。在这种情况下，请使用ES6和JSX。
与1.功能相同。该函数返回您在1.使用ES6下声明的内容。没有缺点。
与2.相同，带有arguments对象，实际上使用ES6和Type Script将参数传递给函数。

function saveButton(props) { return <div class="u-mth u-textRight"> <Button variant="flatBlue">{props.text}</Button> </div>; } const element = <saveButton text="Save" />; ReactDOM.render( element, document.getElementById('root') );

这是使用道具和纯函数的方式。

反应功能或对象

3 个答案: