Question

我想知道是否有可能在两个React组件标签之间传递数据

示例：

Component.js

var React = require('react');

export class MyComponent extends React.Component {
    render() {
        return /*some text*/;
    }
}

App.js

/*rendered to page*/
<MyComponent>How do I display this text?</MyComponent>

我知道我可以添加this.props.text，但只是好奇这是否是一个选项

Answer 1

您可以使用export class MyComponent extends React.Component { render() { return <div>{this.props.children}</div> } }：

<MyComponent>How do I display this text?</MyComponent>

然后将其写为JSX元素：

class ColorBox extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 'rgb(0, 0, 0)'
        }
    }
    componentDidUpdate() {
        console.trace()
    }
    randomizeColor() {
        const colArr = []
        for(let i=0; i<3; i++) {
            const col = Math.round(Math.random() * 255)
            colArr.push(col)
        }
        this.setState({
            value: `rgb(${colArr})`
        })
    }

    render() {
        const style = {
            width: '20px',
            height: '20px',
            backgroundColor: this.state.value
        }
        console.log(style)
        return (
            <div>
                <br />
                <button onClick={ this.randomizeColor.bind(this) }>
                    Randomize
                </button>
                <div style={ style } />
            </div>
        )
    }
}

ReactDOM.render(
  <ColorBox />,
  document.body
);

Answer 2

类似于 Danny Delott 的回答，除了更简单的函数组件和道具解构。

export default function MyComponent({ children }) {
  return (
    <div>{children}</div>
  );
}

Answer 3

我喜欢@ danny-delott的答案，但是如果您不想使用额外的嵌套div，则可以使用React Fragments：

export class MyComponent extends React.Component {
    render() {
        return <>{this.props.children}</>
    }
}

或者，您可能希望将“ display”属性设置为“ contents”，以防止div影响嵌套文本。

export class MyComponent extends React.Component {
    render() {
        return <div style={{display:"contents"}}>{this.props.children}</div>
    }
}

是否有可能在反应组件标签之间传递文本？

3 个答案: