Question

我有一个班级ShowPreview，可以预览网络摄像头。我试图创建一个基于条件呈现组件的RenderOnClick类。

我试图传递给RenderOnClick一个会渲染的课程？我怎么能这样做？

我这样做，所以我不必每次都对这个条件进行编码。

ShowPreview

class ShowPreview extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (<QrReader/>)
    }
}

RenderOnClick

class RenderOnClick extends React.Component{
    constructor(props){
        super(props)
        this.state = ({buttonName: this.props.buttonName, element: this.props.element, isRendered: false})
    }
    render(){
        if(isRendered == false){
            return(<button>{this.state.buttonName}</button>)
        }else{
            return (this.state.element);
        }
    }
}

Answer 1

当你将一个组件传递给另一个组件时，我可以想到composition。

从上面的链接中取得的示例代码

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

您可以做的是将组件作为道具传递，如链接中提到的示例中所示，并在RenderOnclick组件中使用它。

Answer 2

你可以创建一个higher-order component来获取你想要有条件渲染的元素，如下所示：

示例：sandbox

    const RandomElemement = () => <div>Foo!</div>;
    const whenClicked = (WrappedElement) => {
      return class RenderOnClick extends React.Component {
        constructor(props) {
          super(props)
          this.state = ({ 
            buttonName: this.props.buttonName,
            element: this.props.element, 
            isRendered: false })
        }
        handleClick = () => {
          this.setState(prev => ({isRendered: !prev.isRendered}));
        }
        render() {
          const { isRendered } = this.state;
          if (isRendered === false) {
            return (<button onClick={this.handleClick}>{this.state.buttonName}</button>)
          } else {
            return (<WrappedElement />);
          }
        }
      }
    }
    const App = () => {
      const WhenClicked = whenClicked(RandomElemement);
      return (
      <div style={styles}>
        <Hello name="CodeSandbox" />
        <h2>Start editing to see some magic happen {'\u2728'}</h2>
        <WhenClicked buttonName='show foo'/>
        </div>
    )
    };

render(<App />, document.getElementById('root'));

将组件作为道具传递

2 个答案: