Question

我刚刚阅读了reactjs网站的教程，将reactjs添加到现有网站中，而没有编写所有新内容。

https://reactjs.org/docs/add-react-to-a-website.html

这很好。但是现在，我想在一个页面上使用一个组件两次。因此，我需要在此阶段将属性传递给组件（我认为这只是设置道具的机会）：

const teamStrengthsDOMContainer = document.querySelector('#homeTeamRatingStats'); 
ReactDOM.render(teamStrengthsElement(TeamStrengths), teamStrengthsDOMContainer);

这是完整的代码。

页面：

...
<div id="homeTeamRatingStats"></div>

<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['goalkeeper']; ?>" id="goalkeeperText" />
<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['defense']; ?>" id="defenseText" />
<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['midfield']; ?>" id="midfieldText" />
<input type="hidden" value="<?php echo $lang['playerMatchRatings_sidebar']['texts']['forward']; ?>" id="forwardText" />
<input type="hidden" value="<?php echo $homeKeeperRating; ?>" id="homeGoalkeeper" />
<input type="hidden" value="<?php echo $homeDefenseRating; ?>" id="homeDefense" />
<input type="hidden" value="<?php echo $homeMidfieldRating; ?>" id="homeMidfield" />
<input type="hidden" value="<?php echo $homeForwardRating; ?>" id="homeForward" />

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" crossorigin></script>
<script src="js/components/teamStrengths.component.js"></script>
...

组件：

'use strict';
const teamStrengthsElement = React.createElement;

class TeamStrengths extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
    };
  }

  componentDidMount() {
    let goalKeeperText = document.getElementById("goalkeeperText").value;
    let defenseText = document.getElementById("defenseText").value;
    let midfieldText = document.getElementById("midfieldText").value;
    let forwardText = document.getElementById("forwardText").value;
    let goalkeeper = document.getElementById("homeGoalkeeper").value;
    let defense = document.getElementById("homeDefense").value;
    let midfield = document.getElementById("homeMidfield").value;
    let forward = document.getElementById("homeForward").value;
    let ctx = document.getElementById("homeTeamRatingStatsCanvas");
    let myChart = new Chart(ctx, {type: 'polarArea',
        data: {
            labels: [goalKeeperText, defenseText, midfieldText, forwardText],
            datasets: [{
                label: '',
                data: [parseInt(goalkeeper), parseInt(defense), parseInt(midfield), parseInt(forward)],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            legend: {
                display: false,
            },
        }
    });

  }

  render() {
    return teamStrengthsElement('canvas', 
        {   id: "homeTeamRatingStatsCanvas", 
            style: {
                maxWidth: '400px'
            },
        }
    );
  }
}

const teamStrengthsDOMContainer = document.querySelector('#homeTeamRatingStats');
ReactDOM.render(teamStrengthsElement(TeamStrengths), teamStrengthsDOMContainer);

我该怎么做？有人给我提示吗？预先感谢。

Answer 1

如果您使用的是JSX。

ReactDOM.render(
    <TeamStrengths />, //add values that you want to pass as props here
    container
);

没有JSX

ReactDOM.render(
    React.createElement(TeamStrengths, {/* add your props here */}),
    container
);

Answer 2

您可以像创建canvas元素时一样进行操作：通过向React.component中传递第二个参数（您将其别名为teamStrengthsElement，我强烈敦促您不要这样做）：

ReactDOM.render(
    React.createElement(
        TeamStrengths,
        {
            // props here
        }
    ),
    teamStrengthsDOMContainer
);

reactjs-如何为组件提供属性

2 个答案: