Question

如何将计算出的React组件样式传递给其子组件？

从<Parent />的道具中访问<Child />计算样式非常方便。

此外，每次父组件更改时，子项必须接收更新的CSS属性（例如，用户调整窗口大小并将父级的宽度设置为50vw，然后子组件将接收更新后的大小（以像素为单位）。

伪代码：

// App.jsx
class App extends Component {
  render() {
    return (
      <Parent>
        <Child />
        <Child />
      </Parent>
    );
  }
}

// Child.jsx
class Child extends Component {
  render() {
    return <h1>Parent's margin-top: {this.props.parentComputedStyle.marginTop}</h1>
  }
}

这可能吗？我需要第三方库吗？

编辑1

提供了一些示例代码来充分解释我的问题：

import React, { Component, Children, cloneElement } from 'react';

class Parent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div {...this.props}>
        {this.props.children.map((child, index) => {
          return (
            cloneElement(child, {
              key: index.toString(),
              parentComputedStyle: this.props.style
            })
          );
        })}
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <p>Parent width is {this.props.parentComputedStyle.width}</p>
    );
  }
}

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <h1>Styles</h1>
        <Parent
          style={{
            width: '50vw',
            backgroundColor: 'rgba(255, 128, 0, 0.4)',
            marginTop: '10px'
          }}
        >
          <Child />
          <Child />
          <Child />
        </Parent>
      </div>
    );
  }
}

export default App;

这里Child组件呈现＆＃34; 50vh＆＃34;在屏幕上，我希望以像素为单位计算该值（计算出的样式，而不是反应样式对象）。

Answer 1

所以有几种不同的方法可以做到这一点。第一种是简单地添加一个类名，然后写一些有效的CSS。

CSS

.cssClass > h1 {
    // do all the things
}

App.jsx

class App extends Component {
  render() {
    return (
      <Parent className="cssClass">
        <Child />
        <Child />
      </Parent>
    );
  }
}

你可以做的另一件事是传入一个样式对象并通过道具引用它。

App.jsx

class App extends Component {
  render() {
    const otherWay = { marginBottom: '5px' }

    return (
      <Parent>
        <Child style={{marginTop: '5px'}} />
        <Child style={otherWay} />
      </Parent>
    );
  }
}

Child.jsx

class Child extends Component {
  render() {
    return <h1 style={this.props.style}>Parent's</h1>
  }
}

尝试在一个方向上考虑所有内容父 - ＆gt;孩子，最好不要试图走另一个方向。

将计算出的样式传递给React中的子项

编辑1

1 个答案: