Reactjs 以内联样式使用组件

我有一个组成部分：

class PaddingStyle extends Component {
    constructor( props ) {
        super( ...arguments )
    }

    render() {
        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props.attributes; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
    }
}


export default PaddingStyle;

在另一个文件中，我试图将组件返回的内容传递到另一个组件的内联样式中：

import PaddingStyle from '../../components/padding/style';

<div 
  style={{
   padding: <PaddingStyle paddingTop={ paddingTop } paddingRight={ paddingRight } paddingBottom={ paddingBottom } paddingLeft={ paddingLeft } />,
  }}
>
</div>

---

我不明白为什么需要创建一个类组件来设置填充。你可以走了

const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props;
const top = paddingTop ? `${paddingTop}px` : 0;
const right = paddingRight ? `${paddingRight}px` : 0;
const bottom = paddingBottom ? `${paddingBottom}px` : 0;
const left = paddingLeft ? `${paddingLeft}px` : 0;

不需要创建一个单独的类组件来设置填充。然后，您可以直接使用上述变量设置填充

<div 
  style={{
   padding: `${top} ${right} ${bottom} ${left}`,
  }}
>
</div

这项工作：

export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}

---

它可以在任何组件中用作paddingStyle道具。

这不起作用，我们无法提供足够精确的错误描述来帮助您。什么不起作用？它怎么不起作用？你的代码有什么问题？你收到错误信息了吗？错误消息是什么？你得到的结果不是你期望的结果吗？你期望得到什么样的结果？为什么？你会得到什么样的结果？两者有什么不同？你观察到的行为是否不是期望的行为？期望的行为是什么，为什么，观察到的行为是什么，它们之间的区别是什么？您似乎只是使用React组件来执行字符串插值，但不清楚为什么。此外，您也不会将值作为属性属性传递。只是常量paddingStyle={top，right，bottom，left}=>`${top？`${top}px`:0}`；就够了。你不明白你在用的框架，我的朋友。您没有返回react组件中的元素。这可能会引发一个例外。如果您想要一个实用程序函数为您执行此填充样式。。然后做一个效用函数。我强烈建议您在使用前阅读React上的文档it@jonrsharpe或者让它更内联的常量paddingStyle={top=0，right=0，bottom=0，left=0}=>`${top}px${right}px${bottom}px${left}px`；我下面的答案有用吗？请给出一些反馈，我不太会回答StackOverflow的问题。需要第二个组件，因为我正在多个组件中添加填充。我不想每次都重写它。然后我想你可以利用一个全局状态，把你的填充物作为道具传给孩子们的班级。没有任何必要为了样式化而创建类组件。我没有否决投票，但您再次尝试错误地使用react。您不应该出于这样的样式目的渲染组件。最好只调用函数并使用参数，而不是使用带有道具的组件。Aka，style={{padding:paddingStyle{paddingTop:value，paddingBottom:value…}}。如果这样实现的话，基本上可以让函数保持不变。@JohnRuddell我正在呈现一个组件，因为我在多个组件中使用了填充样式。我不想每次更改样式时都对每个样式进行编辑。为什么它不正确，如果它做的工作？我知道你是试图使它充满活力。我说的不是一个组件，也不应该是一个组件。因为在React中，组件在JSX中返回类似于HTML writtin的元素。您应该使此函数成为实用程序函数，而不是component@JohnRuddell但这不是传递道具的唯一方法吗？我不知道我还能如何做到这一点。我认为组件是使用SomeName扩展组件类声明的。我有一个函数，不是吗/你是怎么用的？函数可以是组件，具体取决于您使用它的方式。另外，我会把它移到一个有用的文件夹中，然后从组件中取出，这样它就可以从我这里清楚地看到：+1！

export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}